<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>实现表格排序</title> <style> #ul1{ background: green; } </style> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById('ul1'); var oBtn=document.getElementById('but1'); var aLi=document.getElementsByTagName('li'); //aLi不是真正的数组,只是一个元素集合 var arr=[]; //实现对li的排序 oBtn.onclick=function(){ for(var i=0;i<aLi.length;i++){ arr[i]=aLi[i]; //把aLi中的元素都变成数组,aLi无法使用sort(),因为他不是真正的数组 } arr.sort(function(li1,li2){ var n1=parseInt(li1.innerHTML); var n2=parseInt(li2.innerHTML); return n1-n2; }) //从小到大进行排序 //循环到此为止就已经将数组arr中的内容从小到大排好序了,下一步是要将这些排好的内容插入到ul中 //补充一个知识点,执行appendChild实际上是两个操作:1,将元素从原来的父级元素中删除 2,将元素放到新的父级元素中 for(var i=0;i<arr.length;i++){ oUl.appendChild(arr[i]); //这里的操作是:将一个元素从父级元素oUl中删除,再插回这个父级元素 } }; //////////////////////////////////////////////////////////////////////////////////////////// //实现对表格的排序 var oTab=document.getElementById('tlb1'); var arr1=[]; var oBtn2=document.getElementById('but2'); oBtn2.onclick=function(){ for(var i=0;i<oTab.tBodies[0].rows.length;i++){ arr1[i]=oTab.tBodies[0].rows[i]; //把表格中所有的tr都放入数组arr1中 } arr1.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<arr1.length;i++){ oTab.tBodies[0].appendChild(arr1[i]); }; }; } </script> </head> <body> <ul id='ul1'> <li>23</li> <li>67</li> <li>1</li> <li>245</li> <li>62</li> <li>55</li> </ul> <button type="button" name="button" id='but1'>排序</button> <button type="button" name="button" id='but2'>排序</button> <table id='tlb1' border="1px" width="450px"> <thead> <td>ID</td> <td>name</td> <td>age</td> <td>操作</td> </thead> <tbody> <tr> <td>5</td> <td>QWaa</td> <td>21</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>2</td> <td>小明</td> <td>22</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>6</td> <td>小黑</td> <td>20</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>4</td> <td>小黄</td> <td>10</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>3</td> <td>小何</td> <td>18</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>1</td> <td>大明</td> <td>18</td> <td><a href="javascript:;">删除</a></td> </tr> </tbody> </table> </body> </html>
JS小练习之实现表格排序
猜你喜欢
转载自blog.csdn.net/weixin_41586886/article/details/80662821
今日推荐
周排行