以下是简易效果： 男 女 < 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>'+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 ('입력');<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.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/>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
