别人家的面试题--表格排序
Posted lgjc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了别人家的面试题--表格排序相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> body, html { padding: 0; margin: 0; font-size: 14px; color: #000000; } table { border-collapse: collapse; width: 100%; table-layout: fixed; } thead { background: #3d444c; color: #ffffff; } td, th { border: 1px solid #e1e1e1; padding: 0; height: 30px; line-height: 30px; text-align: center; } .sort-asc::after, .sort-desc::after { content: ‘ ‘; display: inline-block; margin-left: 5px; vertical-align: middle; } .sort-asc::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #eee; } .sort-desc::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #eee; } </style> </head> <body> <table> <thead id="jsHeader"> <tr> <th>product</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>300</td> </tr> <tr> <td>3</td> <td>20.5</td> <td>100</td> </tr> <tr> <td>4</td> <td>40.5</td> <td>200</td> </tr> <tr> <td>5</td> <td>60.5</td> <td>600</td> </tr> <tr> <td>6</td> <td>50.0</td> <td>400</td> </tr> <tr> <td>7</td> <td>70.0</td> <td>700</td> </tr> <tr> <td>8</td> <td>80.5</td> <td>500</td> </tr> </tbody> </table><br /> <input type="button" onclick="sortData(‘sales‘, ‘asc‘)" value="售价" /> <input type="button" onclick="sortData(‘product‘, ‘asc‘)" value="商品" /> <input type="button" onclick="sortData(‘price‘, ‘asc‘)" value="价格" /> <br /><br /> <input type="button" onclick="sortData(‘sales‘, ‘desc‘)" value="售价" /> <input type="button" onclick="sortData(‘product‘, ‘desc‘)" value="商品" /> <input type="button" onclick="sortData(‘price‘, ‘desc‘)" value="价格" /> <script type="text/javascript"> /** * 请完成 sortData 函数，根据参数的要求对表格所有行进行重新排序。 * 1、type为product、price或者sales，分别对应第1 ~ 3列 * 2、order为asc或者desc，asc表示升序，desc为降序 * 3、例如 sortData(‘price‘, ‘asc‘) 表示按照price列从低到高排序 * 4、所有表格内容均为数字，每一列数字均不会重复 * 5、不要使用第三方插件 */ function sortData(type, order) { //完成您的代码 let _parentNodes = document.getElementById("jsList"), _allTrs = _parentNodes.getElementsByTagName("tr"), filed = type == "product" ? 0 : type == "price" ? 1 : 2, sortBy = order == "desc" ? 0 : 1; for(let i = 0; i < _allTrs.length - 1; i++) { for(let j = i + 1; j < _allTrs.length; j++) { let _trAf = _allTrs[j], _trBf = _allTrs[i]; if(Number(_trAf.cells[filed].innerText) > Number(_trBf.cells[filed].innerText) == !sortBy) _parentNodes.insertBefore(_trAf, _trBf); } } } //sortData(‘product‘, ‘desc‘); //sortData(‘price‘, ‘asc‘); //sortData(‘sales‘, ‘ascs‘); </script> </body> </html>
以上是关于别人家的面试题--表格排序的主要内容，如果未能解决你的问题，请参考以下文章