用原生js对表格排序
Posted mask_天俊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用原生js对表格排序相关的知识，希望对你有一定的参考价值。
阿里的模拟笔试题，当时时间有限没写出来，其实是因为自己对原生dom操作不熟悉，这里补一下。
题目的大意是有一个表格，如代码所示
<table> <tr> <th>Name</th> <th>Index</th> </tr> <tr> <td>Jan</td> <td>1</td> </tr> <tr> <td>Saj</td> <td>6</td> </tr> <tr> <td>Law</td> <td>4</td> </tr> <tr> <td>Aq</td> <td>3</td> </tr> </table
| Name | Index |
|---|---|
| Jan | 1 |
| Saj | 6 |
| Law | 4 |
| Aq | 3 |
大概长这样吧，注意有表头，然后让你写一个函数对表中的记录，比如按idx升序排序
思路：就将表中的数据全都取出来，排序之后重新建表。
代码
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <tr> <th>Name</th> <th>Index</th> </tr> <tr> <td>Jan</td> <td>1</td> </tr> <tr> <td>Saj</td> <td>6</td> </tr> <tr> <td>Law</td> <td>4</td> </tr> <tr> <td>Aq</td> <td>3</td> </tr> </table> </body> <script type="text/javascript"> var mysort = ()=>{ var table = document.getElementsByTagName(‘table‘)[0] var trlist= table.querySelectorAll(‘tr‘) var len = trlist.length var trArr = [] var th for(let i=0;i<len;i++){ var tds = trlist[i].querySelectorAll(‘td‘) if(tds.length==0) { th = trlist[i] ; continue } trArr.push({name:tds[0].innerText,index:tds[1].innerText}) } trArr.sort(function(a,b){ return a.index>b.index }) table.innerHTML = "" table.appendChild(th) for(let i=0;i<trArr.length;i++){ var tr = document.createElement("TR") var tdname = document.createElement("TD") tdname.innerText = trArr[i].name var tdindex = document.createElement("TD") tdindex.innerText = trArr[i].index tr.appendChild(tdname) tr.appendChild(tdindex) table.appendChild(tr) } } mysort() </script> </html>
要记住的点就是，querySelectorAll这个方法很好用，返回一个查询的元素的数组，在访问的时候，因为dom有可能变换，所以先把长度记录下来，然后再循环访问。
以上是关于用原生js对表格排序的主要内容，如果未能解决你的问题，请参考以下文章
原生JS我打算在把数据存在缓存数组中，再从数组中取出数据在另一个页面取出做表格，怎么不重复添加？