CSS总结--百度面试之表格排序

最新推荐文章于 2022-07-05 15:16:16 发布

这个名字居然也有

最新推荐文章于 2022-07-05 15:16:16 发布

阅读量513

点赞数

分类专栏：前端 javascript

本文链接：https://blog.csdn.net/my_secret_name/article/details/52770661

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格排序</title>
</head>
<style type="text/css">
table{
width: 500px;
height: 200px;
position: relative;
border-width: 0px 0px 1px 1px;
border-style: solid;
}
tr{
height: 40px;
}
td,th{
width: 25%;
border-width: 1px 1px 0 0;
border-style: solid;
padding: 0;
margin: 0;
}
</style>
<body>
<table id="table" cellpadding="1" cellspacing="1">
<thead>
<tr bgcolor="grey">
<th>姓名</th>
<th οnclick="sortTable(1)">力量</th>
<th οnclick="sortTable(2)">敏捷</th>
<th οnclick="sortTable(3)">智力</th>
</tr>
</thead>
<tbody>
<tr>
<th>德鲁伊</th>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
<tr>
<th>月之骑士</th>
<td>15</td>
<td>22</td>
<td>16</td>
</tr>
<tr>
<th>众神归王</th>
<td>19</td>
<td>35</td>
<td>20</td>
</tr>
<tr>
<th>流浪剑客</th>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var isSort = [false,false,false];//标记是否排过序
function sortTable (colNo) {
var rowsArray = [];//表格中所有行的集合
var colsArray = [];//表格中所有列的集合
var tbody = document.getElementsByTagName('tbody')[0];
//初始化行和列
for (var i = 0; i < tbody.rows.length; i++) {
rowsArray[i] = tbody.rows[i];
colsArray[i] = rowsArray[i].cells[colNo];
}

//排序
console.log(isSort[colNo]);
if (!isSort[colNo]) {//isSort为false时，降序排列
isSort[colNo] = true;
colsArray.sort(function (a,b) {
return b.innerHTML - a.innerHTML;//将被点的那一列降序排序
});
}else{
//此时已经降序排序过了，对数组逆序即可
colsArray.reverse();
isSort[colNo] = false;
}
//当某一列排序后将表格所有元素的值放到新的数组中
var rowsTempArray = [];
for (var i = 0; i < rowsArray.length; i++) {
var colsTempArray = [];
for (var j = 0; j < colsArray.length; j++) {
//将i行的所有列的内容保存在colsTempArray[j]中
colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML;
}
//将一行内容保存到rowsTempArray。
rowsTempArray[i] = colsTempArray;
}
//重绘页面
for (var i = 0; i < rowsArray.length; i++) {
for (var j = 0; j < colsArray.length; j++) {
rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j];
}
}
}
</script>
</body>
</html>

这个名字居然也有

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS总结--百度面试之表格排序

如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。表格排序 table{ width: 500px; height: 200px; position: relative; border
复制链接

扫一扫