用原生js對表格排序
阿新 • • 發佈：2018-09-06
nts 有一個 tex 表格 新建 float length ble inner
阿裏的模擬筆試題，當時時間有限沒寫出來，其實是因為自己對原生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對表格排序