table 排序 添加 删除 等操作

it2022-05-09  36

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <script src="move2.js"></script></head><body><div style="width: 500px; margin:20px auto;"><input type="text" id="tex"><input type="button" id="btn" value="添加"></div><table id="tab" border="1" width="500px" style="margin:0 auto;"> <thead> <tr> <td>姓名</td> <td>学号</td> <td>时间</td> </tr> </thead> <tbody> <tr> <td>11</td> <td>aa</td> <td></td> </tr> <tr> <td>2</td> <td>bb</td> <td></td> </tr> <tr> <td>33</td> <td>cc</td> <td></td> </tr> <tr> <td>44</td> <td>dd</td> <td></td> </tr> <tr> <td>55</td> <td>3</td> <td></td> </tr> <tr> <td>66</td> <td>3</td> <td></td> </tr>

</tbody></table>

<!-- <script>悬停变色 window.οnlοad=function(){ var oTab=document.getElementById('tab'); var oTr=oTab.tBodies[0].rows; var i=0; var oColor=""; for(i=0;i<oTr.length;i++){ if (i%2) { oTr[i].style.background='#eee'; }

} for(i=0;i<oTr.length;i++){ oTr[i].οnmοuseοver=function(){ oColor=this.style.background; this.style.background='green'; } oTr[i].οnmοuseοut=function(){ this.style.background=oColor; } } }</script> -->

<!-- <script>动态添加 window.οnlοad=function(){ var oTab=document.getElementById('tab'); var oText=document.getElementById('tex'); var oBtn=document.getElementById('btn'); var i=0; oBtn.οnclick=function(){ oTr=document.createElement('tr'); oTd=""; oTd=document.createElement('td'); oTd.innerHTML=oTab.tBodies[0].rows.length+1; oTr.appendChild(oTd); oTd=document.createElement('td'); oTd.innerHTML=oText.value; oTr.appendChild(oTd); oTd=document.createElement('td'); oTd.innerHTML='<a href="javascript:;">删除</a>' var aA=oTd.getElementsByTagName('a')[0]; aA.οnclick=function(){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); } oTr.appendChild(oTd); oTab.tBodies[0].appendChild(oTr); }

}</script> --><script> window.οnlοad=function(){ var oTab=document.getElementById('tab'); var oText=document.getElementById('tex'); var oBtn=document.getElementById('btn'); var i=0; var arr=[]; oBtn.οnclick=function(){/* 首先创建数组 因为sort是数组的方法 */ for(i=0;i<oTab.tBodies[0].rows.length;i++){ arr[i]=oTab.tBodies[0].rows[i]; };/*数组排序*/ arr.sort(function(tr1,tr2){ return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML); });/*重新添加*/ for(i=0;i<arr.length;i++){ oTab.tBodies[0].appendChild(arr[i]); }

} }</script></body></html>

转载于:https://www.cnblogs.com/chabai/p/5284247.html


最新回复(0)