标签:rip cto table float 建表 length inner 阿里 fun
阿里的模拟笔试题,当时时间有限没写出来,其实是因为自己对原生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有可能变换,所以先把长度记录下来,然后再循环访问。
标签:rip cto table float 建表 length inner 阿里 fun
原文地址:https://www.cnblogs.com/maskmtj/p/9599249.html