js实现表格的添加删除搜索和排序

来源：互联网发布：女变男网络电影编辑：程序博客网时间：2024/06/04 19:50

用js实现的对表格的简单的操作，添加一行删除一行根据姓名搜索和按照id排序

其中的搜索可以忽略大小写，模糊搜索(模糊搜索即根据姓名中的一个字就可以搜索到所要的内容，还可以多个内容搜索即多个名字中的一个字或全称用空格分隔开，进行多个关键字的搜索)

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css"></style><script type="text/javascript">window.onload=function(){var oTab=document.getElementById('tab1')var oBtn=document.getElementById('btn1');var oBtn2=document.getElementById('btn2');var oBtn3=document.getElementById('btn3')var oAge=document.getElementById('age');var oName=document.getElementById('name');var id=oTab.tBodies[0].rows.length+1;oBtn.onclick=function()//添加的点击事件{   var oTr=document.createElement('tr'); //定义一个添加事件的数组oTrvar oTd=document.createElement('td'); //创建Id的tdoTd.innerHTML=id++;oTr.appendChild(oTd);    //把创建的td添加到数组Tr中var oTd=document.createElement('td');   //创建姓名的tdoTd.innerHTML=oName.value;oTr.appendChild(oTd);var oTd=document.createElement('td');  //创建年龄的tdoTd.innerHTML=oAge.value;oTr.appendChild(oTd);var oTd=document.createElement('td');  //创建删除的tdoTd.innerHTML='<a href="javascript:;">删除</a>'oTr.appendChild(oTd);oTd.getElementsByTagName('a')[0].onclick=function()  //删除的点击事件{oTab.tBodies[0].removeChild(this.parentNode.parentNode);  //删除}oTab.tBodies[0].appendChild(oTr);  //把创建的tr添加到tBodies中}       oBtn2.onclick=function()    //搜索的点击事件  {for(var i=0;i<oTab.tBodies[0].rows.length;i++){var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();var sName=oName.value.toLowerCase();  //toLowerCase()忽略大小写var arr=sName.split('');    //split()模糊搜索 //先把所有颜色设置为空//oTab.tBodies[0].rows[i].style.display='none';  //筛选                    oTab.tBodies[0].rows[i].style.background='';  for(var j=0;j<arr.length;j++){if(sTab.search(arr[j])!=-1)  //search()模糊搜索   {oTab.tBodies[0].rows[i].style.background='yellow';//oTab.tBodies[0].rows[i].style.display='block';   }    }}}oBtn3.onclick=function()//排序的点击事件{var arr=[];for(var i=0;i<oTab.tBodies[0].rows.length;i++){arr[i]=oTab.tBodies[0].rows[i];}arr.sort(function(tr1,tr2){var n1=parseInt(tr1.cells[0].innerHTML);var n2=parseInt(tr2.cells[0].innerHTML);return n1-n2;});for(var i=0;i<arr.length;i++){oTab.tBodies[0].appendChild(arr[i]);}}      }</script></head><body>姓名：<input type="text" id="name" />年龄：<input type="text" id="age"/><input type="button" id="btn1" value="添加" /><input type="button" name="btn2" id="btn2" value="搜索" /><input type="button" name="btn3" id="btn3" value="排序" /><table border="1" id="tab1" width="500"><thead><td>ID</td><td>姓名</td><td>年龄</td><td>操作</td></thead><tbody><tr><td>1</td><td>张三</td><td>34</td><td></td></tr><tr><td>3</td><td>李四</td><td>11</td><td> </td></tr><tr><td>2</td><td>王五</td><td>34</td><td></td></tr><tr><td>4</td><td>李麻子</td><td>39</td><td></td></tr><tr><td>5</td><td>HuHansan</td><td>39</td><td></td></tr></tbody></table></body></html>

阅读全文

0 0

js实现表格的添加 删除 搜索和排序

js实现表格的添加删除搜索和排序