本案例是一个简单表格,通过javascript DOM相关技术,实现对表格的删除更改。案例代码详细的表达了思路分析,适合DOM初学者。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
table{
width:800px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
<tbody id="tb">
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
<td class="control">
<button class="del">删除</button>
<button class="edit">修改</button>
</td>
</tr>
<tr>
<td>小王</td>
<td>16</td>
<td>男</td>
<td class="control">
<button class="del">删除</button>
<button class="edit">修改</button>
</td>
</tr>
<tr>
<td>小张</td>
<td>13</td>
<td>男</td>
<td class="control">
<button class="del">删除</button>
<button class="edit">修改</button>
</td>
</tr>
</tbody>
</table>
<script>
/*
思路:
第一步:页面加载完后获取所要操作节点对象
第二步:为每一个删除按钮和修改按钮添加一个点击事件onclick
第三步:
删除:
节点对象.removeChild(子节点);
tbody.removeChild(当前行);
当前行 = 删除按钮.parentNode.parentNode
修改和确定
根据按钮的内容来确定当前的逻辑
内容:按钮.innerHTML
内容=修改:
为每一个当前行的前三个单元格添加一个input(文本框)
把添加文本框之前的内容赋值给文本框 value
内容=确定:
先获取当前行的前三个单元格里文本框里的内容
把获取的内容暂存下。
把文本框之间变成之前暂存下的内容
*/
var tbody = document.getElementById("tb");
var dels = document.querySelectorAll("#tb .del"); //一组
var edits = document.querySelectorAll("#tb .edit");//一组
for(var i = 0,len = dels.length;i<len;i++){
dels[i].onclick = function(){
var isDel = confirm("您老确定要删除吗?");
if(isDel){
var tr = this.parentNode.parentNode; //当前行节点对象
tbody.removeChild(tr);
}
}
edits[i].onclick = function(){
var content = this.innerHTML;
var tr = this.parentNode.parentNode; //当前行
var tds = tr.children; //一组
if(content=="修改"){
this.innerHTML = "确定"; //把按钮变成确定,方便下次点击执行确定的逻辑
for(var i = 0,len = tds.length-1;i<len;i++){
var v = tds[i].innerHTML; //先把添加文本框之前内容取出来。
//重新为当前的单元格赋值(文本框)
tds[i].innerHTML = '<input type="text" value="' + v + '"/>';
}
}else{ //确定
this.innerHTML = "修改"; //把按钮变成修改,方便下次点击执行修改的逻辑
for(var i = 0,len = tds.length-1;i<len;i++){
var v = tds[i].firstElementChild.value;
tds[i].innerHTML = v;
}
}
}
}
</script>
</body>
</html>
读者可以直接运行示例查看效果进行学习。