js實現表格的新增 刪除 搜尋和排序
阿新 • • 發佈：2018-12-04
用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'); //定義一個新增事件的陣列oTr var oTd=document.createElement('td'); //建立Id的td oTd.innerHTML=id++; oTr.appendChild(oTd); //把建立的td新增到陣列Tr中 var oTd=document.createElement('td'); //建立姓名的td oTd.innerHTML=oName.value; oTr.appendChild(oTd); var oTd=document.createElement('td'); //建立年齡的td oTd.innerHTML=oAge.value; oTr.appendChild(oTd); var oTd=document.createElement('td'); //建立刪除的td oTd.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>