以下是简易效果：
| id | 姓名 | 年龄 | 性别 | 操作 | |
|---|---|---|---|---|---|
| 删除选中 | |||||
<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"><br/>(function(){<br/> var formContrl = document.querySelectorAll('header>*');<br/> var table = document.querySelector('table');<br/> var tBody = table.tBodies[0];<br/> var tFootChild = table.tFoot.rows[0].cells[0].children;<br/> var nub = 0;<br/> formContrl[formContrl.length-1].onclick = function(){<br/> /* 判断输入 内容 略 */<br/> /* 生成元素 */<br/> nub++;<br/> var tr = document.createElement("tr");<br/> tr.innerHTML = '<th><input type="checkbox" name=""><th>'+nub+'<th>'+formContrl[0].value+'<th>'+formContrl[1].value+'<th>'+formContrl[2].value+'<th><a href="javascript:;">↑ <a href="javascript:;">↓ <a href="javascript:;">X';<p> /* 绑定事件 */<br/> var a = tr.querySelectorAll('a');<br/> var check = tr.querySelector('input');<br/> /*选中单个时候，操作整体书否全选 */<br/> check.onchange = setCheckAll;<br/> tFootChild[0].checked = false;<p> /* 上移 */<br/> a[0].onclick = function(){<br/> if(tr.previousElementSibling){<br/> tBody.insertBefore(tr,tr.previousElementSibling);<br/> } else {<br/> //alert("已经是第一个了");<br/> tBody.appendChild(tr);<br/> }<br/> };<br/> /* 下移 */<br/> a[1].onclick = function(){<br/> if(tr.nextElementSibling){<br/> tBody.insertBefore(tr.nextElementSibling,tr);<br/> } else {<br/> //alert("已经是第一个了");<br/> tBody.insertBefore(tr,tBody.rows[0]);<br/> }<br/> };<br/> /*删除 */<br/> a[2].onclick = function(){<br/> tBody.removeChild(tr);<br/> setCheckAll();<br/> };<br/> /* 插入元素 */<br/> tBody.appendChild(tr);<br/> };<br/> tFootChild[0].onchange = function(){<br/> /*操作 所有复选框的全选和全不选*/<br/> var checks = tBody.querySelectorAll('input');<br/> var _this = this;<br/> checks.forEach(function(value){<br/> value.checked = _this.checked;<br/> });<br/> };<p> /*删除选中 */<br/> tFootChild[1].onclick = function(){<br/> /*操作 所有复选框的全选和全不选*/<br/> var checks = tBody.querySelectorAll('input');<br/> var _this = this;<br/> checks.forEach(function(value){<br/> if(value.checked){<br/> tBody.removeChild(value.parentNode.parentNode);<br/> }<br/> });<br/> };<p><br/> /*设置全选*/<br/> function setCheckAll(){<br/> tFootChild[0].checked = getCheckAll();<br/> }<br/> /* 获取这一组的check是否全部选中 */<br/> function getCheckAll(){<br/> var checks = tBody.querySelectorAll('input');<br/> for(var i = 0; i < checks.length;i++){<br/> if(!checks[i].checked){<br/> return false;<br/> }<br/> }<br/> return true;<br/> }<br/>})(); <br/></script>
