思路:首先将html中的tbody表格以对象数组的形式存储起来,即外部结构是数组,内部元素是对象,然后再对数组进行排序即可。首先获取tbody,然后获取tbody中的所有tr,接着获取tr中的所有td,再对td进行处理即可得到对象,再将各个对象加入数组中即可。
<body> <table> <thead> <tr><th>id</th><th>price</th><th>sales</th></tr> </thead> <tbody id="jsList"> <tr><td>1</td><td>10.0</td><td>800</td></tr> <tr><td>2</td><td>30.0</td><td>600</td></tr> <tr><td>3</td><td>20.5</td><td>700</td></tr> <tr><td>4</td><td>40.5</td><td>500</td></tr> <tr><td>5</td><td>60.5</td><td>300</td></tr> <tr><td>6</td><td>50.0</td><td>400</td></tr> <tr><td>7</td><td>70.0</td><td>200</td></tr> <tr><td>8</td><td>80.5</td><td>100</td></tr> </tbody> </table> <script type="text/javascript"> function sort(type, order) { //将列表存储为对象数组 再利用数组排序 var tbody = document.getElementById('jsList'); // 获取<tbody>元素 var rows = tbody.getElementsByTagName('tr'); // 获取所有<tr>元素 var arr=[] for (var i = 0; i < rows.length; i++) { var tds = rows[i].getElementsByTagName('td'); // 获取当前行下的所有<td>元素 // 分别提取每个<td>元素的内容 并转换为数字 var td1 = Number(tds[0].innerText); // 第一个<td> var td2 = Number(tds[1].innerText); // 第二个<td> var td3 = Number(tds[2].innerText); // 第三个<td> var obj={} obj["id"]=td1 obj["price"]=td2 obj["sales"]=td3 //注意这个关键 直接将原数组也作为一个元素 这样排序其他key时 按照key排序后 直接索引tr即可 obj["tr"]=rows[i] arr.push(obj) } arr.sort(function(a,b){ if(order==='asc') return a[type]-b[type] else if(order==='desc') return b[type]-a[type] }) tbody.innerHTML = '' arr.forEach(item => { tbody.appendChild(item["tr"]); }) return arr } sort('sales','asc') </script>
总结:注意这个关键,直接将原数组元素tr也作为一个元素存储在对象元素中,这样排序其他key时,按照key排序后,直接索引tr即可获得对应的tr。arr.sort函数是直接在原数组上排序。这个牛客js可以通过。。。
<body> <table> <thead> <tr><th>id</th><th>price</th><th>sales</th></tr> </thead> <tbody id="jsList"> <tr><td>1</td><td>10.0</td><td>800</td></tr> <tr><td>2</td><td>30.0</td><td>600</td></tr> <tr><td>3</td><td>20.5</td><td>700</td></tr> <tr><td>4</td><td>40.5</td><td>500</td></tr> <tr><td>5</td><td>60.5</td><td>300</td></tr> <tr><td>6</td><td>50.0</td><td>400</td></tr> <tr><td>7</td><td>70.0</td><td>200</td></tr> <tr><td>8</td><td>80.5</td><td>100</td></tr> </tbody> </table> <script type="text/javascript"> //将列表存储为对象数组 再利用数组排序 var tbody = document.getElementById('jsList'); // 获取<tbody>元素 var rows = tbody.getElementsByTagName('tr'); // 获取所有<tr>元素 var arr=[] for (var i = 0; i < rows.length; i++) { var tds = rows[i].getElementsByTagName('td'); // 获取当前行下的所有<td>元素 // 分别提取每个<td>元素的内容 并转换为数字 var td1 = Number(tds[0].innerText); // 第一个<td> var td2 = Number(tds[1].innerText); // 第二个<td> var td3 = Number(tds[2].innerText); // 第三个<td> var obj={} obj["id"]=td1 obj["price"]=td2 obj["sales"]=td3 arr.push(obj) } function sort(type, order) { var res = arr.sort(function(a,b){ if(order==='asc') return a[type]-b[type] else if(order==='desc') return b[type]-a[type] }) render(res) } function render(res) { var str='' res.map(item=>{ str+=`<tr><td>${item.id}</td><td>${item.price}</td><td>${item.sales}</td></tr>` }) tbody.innerHTML=str } sort('sales','asc') </script> </body>
总结:这个是可以满足题目要求的,但是牛客js报错。。。