JavaScript对表格增删改查
⽂章⽬录
简单表单
  先⽤⼀个简单的表格来练练⼿。
HTML部分代码
<body>
<label>姓名：</label>
<input type="text"name="name"placeholder="请输⼊姓名">
<br>
<span>年龄：</span>
<input type="text"name="age"placeholder="请输⼊年龄">
<button onclick="add1()">添加</button><br>
<span>姓名：</span>
<input type="text"name="username"placeholder="请输⼊需要查询的姓名">
<button>查询</button><br>
<br>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
  现在我们需要进⾏表格中数据的增删改查部分代码的书写了，⾸先肯定需要先完成增加数据的功能，其次完成删除和查询数据功能，因为修改数据稍微复杂些，所以将修改数据放到最后完成。
添加数据
  先理清我们需要做什么？
1. 获取填写的姓名和年龄，并⽣成⼀个 id
2. 在表格中添加⼀⾏来保存 id 和填写的姓名、年龄
 1. 获取填写的数据
  使⽤ document 对象的⽅法可以获取到填写的数据，这⾥我⽤的是getElementsByTagName⽅法根据标签名来获取对象，也可以⽤其他的获取元素的⽅法。
var id =1;
function add1(){
// 获取填写的数据
var inputLables = ElementsByTagName("input");
var name = inputLables[0].value;
var age = inputLables[1].value;
// 简单数据校验
if(name==""|| age==""){
alert("请正确输⼊");
return;
}
}
 2. 添加数据
  获取到了填写的数据之后，需要在表格中添加⼀⾏，来存储这些数据，这需要添加 tr 标签和 td 标签，那么怎么来添加这些标签呢？  ⽅法1：拼接字符串
  最简单易懂的⽅法就是拼接字符串(添加操作的万⾦油)，我们可以使⽤document的⽅法获取到 table 标签中的 tbody 标签，然后⽤innerHTML属性获取到当前 tbody 标签中的⽂本，在它的后⾯拼接上HT
ML语句。
function add1(){
// 获取填写的数据
var inputLables = ElementsByTagName("input");
var name = inputLables[0].value;
var age = inputLables[1].value;
// 简单数据校验
if(name==""|| age==""){
alert("请正确输⼊");
return;
}
/
/ 字符串拼接
var str1 =""+
"<tr>"+
"<td>"+(++id)+"</td>"+
input标签placeholder属性"<td>"+ name +"</td>"+
"<td>"+ age +"</td>"+
"<td>"+
"<a href='javascript:;'>删除</a>"+
" <a href='javascript:;'>修改</a>"+
"</td>"+
"</tr>";
var obj = ElementsByTagName("tbody")[0];
obj.innerHTML += str1;
}
<a href='javascript:;'>删除</a> 可以看到这⾥ a 标签的 href 属性中使⽤的不是地址，⽽是JavaScript代码，⽽使⽤JavaScript代码是
空语句，这样会使得 a 标签在点击时之后不会发⽣任何事情。
  ⽅法2：DOM操作
function add2(){
// 获取元素
var inputLabels = ElementsByTagName("input");
var name = inputLabels[0].value;
var age = inputLabels[1].value;
// 简单校验
if(name ==""|| age ==""){
alert("请正确输⼊");
return;
}
var new_tr;
var new_td;
new_tr = ateElement("tr");// 创建 tr 标签
new_td = ateElement("td");// 创建 td 标签
new_td.innerHTML =++id;// 将 id 添加到标签中
new_tr.appendChild(new_td);// 将 td 标签添加到 tr 标签中
new_td = ateElement("td");// 创建 td 标签
new_td.innerHTML=name;// 将获取的 name 添加到标签中
new_tr.appendChild(new_td);// 将 td 标签添加到 tr 标签中
new_td = ateElement("td");// 创建 td 标签
new_td.innerHTML=age;// 将获取的 age 添加到标签中
new_tr.appendChild(new_td);// 将 td 标签添加到 tr 标签中
new_td = ateElement("td");// 创建 td 标签
// 将获取的删除/修改添加到标签中
new_td.innerHTML="<a href='javascript:delete1();'>删除</a>"+ " <a href='javascript:update1();'>修改</a>";
new_tr.appendChild(new_td);// 将 td 标签添加到 tr 标签中
// 将 tr 标签添加到 tbody 标签中
  ⽅法三：前两种⽅法的组合
function add3(){
var inputLabels = ElementsByTagName("input");
// console.log(inputLabels.length);
var name = inputLabels[0].value;
var age = inputLabels[1].value;
var new_tr = ateElement("tr");
new_tr.innerHTML ="<td>"+(++id)+"</td>"+
"<td>"+ name +"</td>"+
"<td>"+ age +"</td>"+
"<td>"+
"<a href='javascript:;'>删除</a>"+
" <a href='javascript:;'>修改</a>"+
"</td>";
删除数据
  还是⼀样，在写删除功能之前，要理清实现功能的步骤
1. 到需要删除的 tr 标签
2. 将到的 tr 标签从 table 标签中删除
  知道了需要怎么做之后，我们来完成删除数据的代码。
 ⽅法1：
  在上⾯的添加数据的JavaScript代码中的删除的 a 标签中添加上⼀个点击事件，
new_td.innerHTML="<a href='javascript:;' οnclick=delete1(this)>删除</a>"+
" <a href='javascript:update1();'>修改</a>";
  然后来实现⼀下delete1()⽅法
function delete1(obj){
var tr = obj.parentNode.parentNode;
}
  这个过程中，将 a 标签作为参数传到了delete1⽅法中，利⽤标签间的关系，使⽤parentNode属性可以到 a 标签的⽗元素—— td 标签，然后再到 td 标签的⽗元素，也就是我们需要删除的 tr 标签，之后使⽤removeChilde()⽅法将这个 tr 标签从 tbody 中删除即可。
  ⼀般删除操作都会让⽤户确认的，所以我们加⼀个选择提⽰框。
function delete1(obj){
var tr = obj.parentNode.parentNode;
if(confirm("是否删除该条记录?")){
}
}
  这⾥如果不传 this 参数的话，在 delete1() ⽅法中使⽤的 this 是 window 对象，注意和⽅法2区分开
 ⽅法2：
  ⽅法2添加事件的⽅式和⽅法1有些区别，⽅法1是直接在 a 标签上使⽤ onclick 属性添加的事件，⽽⽅法2使⽤对象.事件名=⽅法的⽅式为 a 标签添加事件。
new_td.innerHTML="<a href='javascript:;'>删除</a>"+
" <a href='javascript:;'>修改</a>";
ElementsByTagName("a")[0].onclick=delete2;
  注意！这⾥需要将 delete2 这个⽅法的定义赋给 onclick，所以不要给 delete2 加上()，加上()表⽰将 delete2 这个⽅法的返回值赋给onclick ，这⾥和在标签中为属性赋值不同，在标签中为 onclick 属性赋值需要加上()
function delete2(){
var tr =this.parentNode.parentNode;
if(confirm("是否删除该条记录?")){
}
}
  注意！这⾥⼜和⽅法1不同，⽅法1中传递了 this 参数，因为调⽤⽅法1中的delete1 ⽅法的是window对象，⽽⽅法2中则不需要传递this 作为参数，因为调⽤delete2 ⽅法的对象是 a 标签(ElementsByTagName("a")[0])
查询数据
1. 获取需要查询的姓名
2. 从表格中查询数据
function select1(){
// 获取⽂本框中内容
var inputLabels = ElementsByTagName("input");
var name = inputLabels[2].value;
// 获取表格中的列
var trs = ElementsByTagName("tr");
var len = trs.length;
// 清除之前选中的记录的背景⾊
for(var i =1; i < len; i++){
trs[i].removeAttribute("style");
}
// 简单的校验
if(name ==""){
return;
}
// for 循环遍历
for(var i =1; i < len; i++){
if(name == trs[i].cells[1].innerHTML){
/
/ if (trs[i].cells[1].innerHTML.indexOf(name) > -1) —— 模糊查询
trs[i].style.backgroundColor ="red";
}
}
}
  需要注意的点：
1. for 循环的循环变量 i 是从1开始的，因为 trs[0] 是 ID、名字、年龄、操作那⾏；
2. for 循环遍历中 if 条件⾥ name == trs[i].cells[1].innerHTML是全匹配，trs[i].cells[1].innerHTML.indexOf(name) > -1则是模糊匹配修改数据
1. 获取需要修改的数据；
2. 修改后的保存。
  获取修改前的数据，将对应的 td 标签的内容改为⽂本输⼊框以便获取修改后的数据，将操作栏中的删除、修改键改为保存键。
function update1(obj){
var thistd = obj.parentNode;
var agetd = thistd.previousSibling;
var nametd = agetd.previousSibling;
agetd.innerHTML ="<input type='text' value='"+ agetd.innerText +"'/>";
nametd.innerHTML ="<input type='text' value='"+ nametd.innerText +"'/>";
thistd.innerHTML ="<a href='javascript:;'>保存</a>";
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。