标签：doc 使用 根据 表示 -- html line height cli
<!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>
标签：doc 使用 根据 表示 -- html line height cli
原文地址：https://www.cnblogs.com/lgjc/p/10136390.html
