表格操作
需求:1.添加数据(将填入的信息添加到表格中)
2.按照编号或者年龄排序
3.升序或者降序排序
4.移入移出隔行变色
5.全选
6.上移下移
7.删除
8.批量删除
HTML
<div class="box"> <p> <span>请输入名字:<input type="text" /></span> <span>请选择性别: <select> <option value="男">男</option> <option value="女">女</option> </select> </span> <span>请输入年龄:<input type="text" /></span> <input type="button" value="添加" id="add"/> </p> <p> 排序: <select> <option value="编号">编号</option> <option value="年龄">年龄</option> </select> <select> <option value="升序">升序</option> <option value="降序">降序</option> </select> <input type="button" value="排序" id="sort"/> </p> <p> 搜索: <input type="text" /> <input type="button" value="搜索" id="search"/> </p> <p> <input type="button" value="反选" id="fan"/> <input type="button" value="批量删除" id="many" /> </p> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th> <label> 全选 <input type="checkbox" id="allBtn"/> </label> </th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>1</td> <td>LEO</td> <td>男</td> <td>36</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>2</td> <td>MOMO</td> <td>男</td> <td>16</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>3</td> <td>鹿晗</td> <td>男</td> <td>26</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>4</td> <td>杨紫</td> <td>女</td> <td>25</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> <tr> <td> <label> <input type="checkbox"/> </label> </td> <td>5</td> <td>张一山</td> <td>男</td> <td>26</td> <td> <input type="button" value="上移" /> <input type="button" value="下移" /> <input type="button" value="删除" /> </td> </tr> </table> </div>
CSS
*{ margin: 0; padding: 0; } .box{ width: 800px; margin: 30px auto 0; } .box input[type=text]{ width: 110px; padding-left: 10px; height: 20px; } .box p{ padding-bottom: 20px; } .box span{ margin-right: 10px; } .box table{ width: 100%; border: 1px solid #000; text-align: center; border-left: 0; } th,td{ height: 30px; border-left: 1px solid #000; } td{ border-top: 1px solid #000; } td label{ display: inline-block; width: 100%; height: 100%; } td>input{ float: left; margin-left:20px; }
JS
var oInput=document.getElementsByTagName("input"); var select1=document.getElementsByTagName("select"); var oTable=document.getElementsByTagName("table")[0]; var allBtn=document.getElementById("allBtn"); var searchBtn=document.getElementById("search"); var fanBtn=document.getElementById("fan"); var manyBtn=document.getElementById("many"); var tBody=oTable.tBodies[0]; var rows=tBody.rows; var len=rows.length; var oldColor=""; var num=0; //定义一个临时容器,存储需要排序行对象。 var trArr=[]; colorFn(); fn(); //添加 oInput[2].onclick=function(){ if(oInput[0].value != ""&&oInput[1].value != ""){ //添加行 var tr=document.createElement("tr"); var str1='<td><label><input type="checkbox"/></label></td><td>'+len+'</td><td>'+oInput[0].value+'</td><td>'+select1[0].value+'</td>'; var str2='<td>'+oInput[1].value+'</td><td><input type="button" value="上移" /><input type="button" value="下移" /><input type="button" value="删除" /></td>'; tr.innerHTML=str1+str2; tBody.appendChild(tr); //添加信息后行数发生变化,事件、隔行变色,排序数组都需重置 //再次获取行数 len=rows.length; colorFn(); fn(); sortFn(); moveFn(); } } //排序 sortFn(); function sortFn(){ //遍历原行集合,并将需要排序的行对象存储到临时容器中。 //i初始值等于1,去除标题行 for (var i=1;i<len;i++) { trArr[i-1]=rows[i]; } oInput[3].onclick=function(){ if(select1[1].value=="年龄"){ //数组按年龄排序 mySort(trArr,4); }else{ //数组按编号排序 mySort(trArr,1); } //添加行 addTr(); //重置隔行变色 colorFn(); } } function addTr(){ //升序 if(select1[2].value=="升序"){ for (var i=0;i<trArr.length;i++) { tBody.appendChild(trArr[i]); } }else{ //降序 for (var i=trArr.length-1;i>=0;i--) { tBody.appendChild(trArr[i]); } } } //排序函数 function mySort(arr,a){ for (var i=0;i<arr.length;i++) { for (var j=i+1;j<arr.length;j++){ //按照年龄数值排序,并转成整数。 if(parseInt(arr[i].cells[a].innerHTML)>parseInt(arr[j].cells[a].innerHTML)){ var temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } } } } //搜索:当按名字、年龄、性别搜索到该行时,该行高亮 searchFn(); function searchFn(){ searchBtn.onclick=function(){ colorFn(); if(oInput[4].value==""){ alert("请输入要搜索的内容"); }else{ for (var i=1;i<len;i++) { for (var j=0;j<rows[i].cells.length;j++) { if(oInput[4].value==rows[i].cells[j].innerHTML){ rows[i].cells[j].parentNode.style.background="yellow"; } } } } } } //反选 fanFn(); function fanFn(){ fanBtn.onclick=function(){ var arr=[]; for (var i=1;i<len;i++) { var check=rows[i].cells[0].children[0].children[0]; check.checked=!check.checked; if(check.checked){ num++; //当选中该行时 rows[i].style.background="#B13937"; oldColor="#B13937"; }else if(!check.checked){ num--; //当取消选中该行时 if(rows[i].index%2==0){ oldColor="pink"; }else{ oldColor="#ccc"; } rows[i].style.background=oldColor; } } //当全部被选中后,全选按钮被选中,否则取消 if(num==len-1){ allBtn.checked=true; }else{ allBtn.checked=false; } } } //批量操作 manyBtn.onclick=function(){ for (var i=1;i<len;i++) { var check=rows[i].cells[0].children[0].children[0]; if(check.checked){ rows[i].style.display="none"; } } } //上移,下移 moveFn(); function moveFn(){ for (var i=1;i<len;i++) { var upBtn=rows[i].cells[5].children[0]; var downBtn=rows[i].cells[5].children[1]; var delBtn=rows[i].cells[5].children[2]; //上移 upBtn.onclick=function(){ //获得tBody var parent=this.parentNode.parentNode.parentNode; var pre=this.parentNode.parentNode.previousElementSibling; var elem=this.parentNode.parentNode; if(elem==tBody.rows[1]){ alert('到头了'); }else{ parent.insertBefore(elem,pre); } } //下移 downBtn.onclick=function(){ var parent=this.parentNode.parentNode.parentNode; var next=this.parentNode.parentNode.nextElementSibling; var elem=this.parentNode.parentNode; if(elem==tBody.lastElementChild){ alert('到尾了'); }else{ parent.insertBefore(elem,next.nextElementSibling); } } //删除 delBtn.onclick=function(){ var parent=this.parentNode.parentNode.parentNode; var elem=this.parentNode.parentNode; parent.removeChild(elem); len=rows.length; colorFn(); } } } //隔行变色 function colorFn(){ for (var i=1;i<len;i++) { //隔行变色 if(i%2==0){ rows[i].style.background="pink"; }else{ rows[i].style.background="#ccc"; } } } //事件函数 function fn(){ for (var i=1;i<len;i++) { //鼠标移入 rows[i].index=i; rows[i].onmouseover=function(){ //记录原先背景颜色值 oldColor=this.style.background; //改变背景颜色 this.style.background="#A4A4A4"; } //鼠标移出 rows[i].onmouseout=function(){ this.style.background=oldColor; } //点击选中 rows[i].cells[0].children[0].children[0].onclick=function(){ var Parent=this.parentNode.parentNode.parentNode; if(this.checked){ num++; //当选中该行时 Parent.style.background="#B13937"; oldColor="#B13937"; }else if(!this.checked){ num--; //当取消选中该行时 if(Parent.index%2==0){ oldColor="pink"; }else{ oldColor="#ccc"; } Parent.style.background=oldColor; } //当全部被选中后,全选按钮被选中,否则取消 if(num==len-1){ allBtn.checked=true; }else{ allBtn.checked=false; } } } } //点击全选 allBtn.onclick=function(){ //全部选中 if(this.checked){ num=5; for (var i=1;i<len;i++) { rows[i].children[0].children[0].children[0].checked=true; rows[i].style.background="#B13937"; } }else{ //全部取消 num=0; for (var i=1;i<len;i++) { rows[i].children[0].children[0].children[0].checked=false; } colorFn(); } }