以下は简易效果： 男 女 < input type="button" value="提交"> id 年龄性别操作 删除选中 <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><th>'+nub+'< /th></p> <th>'+formContrl[0].value+'</th> <th>'+formContrl[1].value+'</th> <th>'+formContrl[2]。 value+'</th><th><a href="javascript:;">↑</a> <a href="javascript:;">↓</a> href="javascript:;">X</a></th>';<p> /* 绑定イベント */<br> var a = tr.querySelectorAll('a');<br> var check = tr.querySelector ('input');<br> /*选中单个時候，操作整体书否全选 */<br> check.onchange = setCheckAll;<br> tFootChild[0].checked = false;</p> <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> <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> <p><br> /* 設定 すべて選択* /<br> function setCheckAll(){<br> tFootChild[0].checked = getCheckAll();<br> }<br> /* このグループ内のすべてのチェックが選択されているかどうかを取得します*/<br> function getCheckAll(){<br> var checks = tBody. input');<br> for(var i = 0; i <checks.length></checks.length> if(!checks[i].checked){<br> return false;<br> }<br> }<br> return true;<br> }<br>} )(); <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
