当前位置：网站首页>JS学习笔记18-23
JS学习笔记18-23
2022-07-28 14:05:00 【那人独钓寒江雪.】
一、添加删除记录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
margin: 0;
padding: 0;
}
</style> <script> window.onload = function () {
//要求：点击超链接以后,删除一个员工的信息
//获取所有的超链接 a是容器
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
//点击超链接后需要删除超链接 这里我们点击那个超链接this就是谁
//当前节点的父亲的父亲, 就是 a的父亲是td td的父亲是tr
var tr = this.parentNode.parentNode;
//删除之前弹出一个提示框 confirm()用于弹出一个带有确认和取消按钮的提示框
//获取要删除的员工的名字
var name = tr.getElementsByTagName("td")[0].innerHTML; //innerHTML获取对象的内容
//confirm会返回一个true和false的值
var flag = confirm("确定删除" + name + "这组数据吗？");
if (flag == true) {
//删除tr tr的父节点是table
//当选择实用removeChild的时候 要去找他的父节点来删除(要删除的节点)子节点。
tr.parentNode.removeChild(tr);
} else if (flag == false) {
alert("您已成功取消~")
}
//点击超链接以后,超链接会跳转页面,这个是超链接的默认行为.
//但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
//有true返回值,false无返回值
return false;
}
}
//要求：实现添加员工的功能
//- 点击按钮以后,将员工的信息添加到表格中
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function () {
//获取用户添加的员工信息
//获取员工的名字 即输入的名字
var name = document.getElementById("empName").value;//input文本框使用value来获取内容
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
// <tr>
// <td>Tom</td>
// <td>tom@tom.com</td> // <td>5000</td> // <td><a href="deleteEmp?id=001">Delete</a></td> // </tr> 需要将获取到的信息保存到tr中 //创建一个tr var tr = document.createElement("tr");
//创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//创建一个超链接
var a = document.createElement("a");
//创建完元素 就该创建文本 之后追加文本
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");//默认添加为Delete
//将文本条件到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
//向a中添加文本;
a.appendChild(delText);
//将a添加到td中
aTd.appendChild(a);
//将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//向a中添加href属性
a.href = "javascript:;";
//为新添加的a再绑定一次单击响应函数 a.onclick = function () {
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("是否要删除" + name + "数据~");
if (flag == true) {
//等于 table.removeChild(tr); 父元素节点.函数(子节点)
tr.parentNode.removeChild(tr);
} else if (flag == false) {
alert("取消成功~");
}
}
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的table
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable" border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table border="1">
<tr>
<td class="word">name：</td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary：</td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
二、操作内联样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{
width: 100px;
height: 100px;
background-color: red;
}
</style> <script> window.οnlοad=function(){
//点击按钮后修改box1的大小
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
//为按钮绑定单击响应函数 btn01.οnclick=function(){
//修改box1的宽度 通过js修改元素的样式; 元素.style.样式名=样式值 点了之后就会发生变化
//内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
box1.style.width="300px";
box1.style.height="300px";
box1.style.backgroundColor="yellow";
};
var btn02=document.getElementById("btn02");
btn02.οnclick=function(){
box1.style.width="500px";
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下2</button>
<br><br>
<div id="box1"></div>
</body>
</html>
三、获取元素的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style> <script> window.οnlοad=function(){
//点击按钮以后读取box1的样式
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.οnclick=function(){
//getComputedStyle 可以传递一个为元素,一般都传null 会返回一个对象并且打印.
alert(getComputedStyle(box1,null).backgroundColor);
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br><br>
<div id="box1"></div>
</body>
</html>
四、其他样式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* clientWidth clientHeight -这两个属性可以获取元素的可见宽度和高度 offsetWidth offsetHeight -获取元素的整个的宽度和高度,包括内容区、内边距和边框 offsetParent - 可以用来获取当前元素的定位父元素 offsetLeft - 当前元素相对于其定位父元素的水平偏移量 offsetTop - 当前元素相对于其定位父元素的垂直偏移量 scrollWidth scrollHeight -可以获取元素整个滚动区域的宽度和高度 scrollLeft - 可以获取水平滚动条滚动的距离 scrollTop - 可以获取垂直条滚动的距离 当垂直滚动条到底时表单项可用 onscroll - 该事件会在元素的滚动条滚动时触发 disabled属性可以设置一个元素是否禁用, 如果设置为true,则元素禁用 如果设置为false,则元素可用 inputs[0].disavled=false; */
</script>
</head>
<body>
</body>
</html>
五、事件的委派
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul li{
list-style: none;
}
</style> <script> window.onload = function(){
//为每一个超链接都绑定一个单击响应函数
var u1=document.getElementById("u1");
//点击按钮以后添加超链接
var btn01=document.getElementById("btn01");
btn01.οnclick=function(){
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;'>新建的超链接</a>"
//将li添加到ul中
u1.appendChild(li);
};
};
//获取所有的a
var allA=document.getElementsByTagName("a");
//遍历
for (var i=0;i<allA.length;i++){
allA[i].οnclick=function(){
alert("超链接函数");
};
};
</script>
</head>
<body>
<ul id="u1">
<li><a href="javascript:;">超链接一</a></li>
<li><a href="javascript:;">超链接二</a></li>
<li><a href="javascript:;">超链接三</a></li>
</ul>
<button id="btn01">点击按钮以后添加超链接</button>
<br><br>
<button id="btn02">点击按钮后删除超链接</button>
</body>
</html>
六、事件对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #areaDiv{
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg{
border:1px solid black;
width: 300px;
height: 20px;
}
</style> <script> window.onload = function(){
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
areaDiv.οnmοusemοve=function(event){
var x=event.pageX;
var y=event.pageY;
showMsg.innerHTML="X="+x+"y="+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
边栏推荐
- SystemVerilog
- 14、 ROS meta function package
- Solve blast database error: error pre fetching sequence data
- How to gracefully encapsulate anonymous inner classes (DSL, high-order functions) in kotlin
- Knowledge map Foundation (I) - what is knowledge map
- Word creates a title list with automatic numbering
- buuctf_ php
- 云计算需要考虑的安全技术列举
- Pytorch GPU installation
- 19、 ROS parameter name setting
猜你喜欢
SSH service
Compilation language and interpretation language
Analysis vulnerability introduction
Establishment and traversal of binary tree (implemented in C language)
9、 C array explanation
Talk about low code / zero code tools
ssh服务
Gradle -- package multiple variants with gradle
Mysql使用left join连表查询时，因连接条件未加索引导致查询很慢
MLX90640 红外热成像仪传感器模块开发笔记（八）
随机推荐
Compose learning notes 1-compose, state, flow, remember
VTK vtkcontourwidget extracts regions of interest
Node.js+express realizes the operation of MySQL database
23、 TF coordinate transformation (III): dynamic coordinate transformation
C language program: judging triangles
Google lab usage notes
Simple data analysis using Weka and excel
6、 C language circular statement
Third class exercise
CCSP 云安全设计原则都有哪些
Find papers and their open source code
Install biological sequence de redundancy software CD hit
58 sub station Anju, broker marketing management platform login interface encryption reverse
为什么企业需要用户自治的数字身 份
22、 TF coordinate transformation (II): static coordinate transformation
How to gracefully encapsulate anonymous inner classes (DSL, high-order functions) in kotlin
Idea2020.1.4 packages package collapse
[leetcode] sticker spelling (dynamic planning)
ssh服务
看了就会的 Rainbond 入门教程