js表格根据某一列排序
程序员文章站
2022-06-16 10:05:54
...
嗯哼，直接上代码~
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>升序降序练习</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
table{
width:500px;
height:500px;
border:#400040 solid 2px;
border-collapse:collapse;
}
table td,th{
border:solid 2px;
}
table th{
background-color:#c0c0c0;
}
</style>
</head>
<body>
<button class="descendingOrder">降序</button>
<button class="ascendingOrder">升序</button>
<table id="tableId">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生地</th>
</tr>
</thead>
<tbody>
<tr class='c1'>
<td>张三</td>
<td><input type="text" name=""></td>
<td>湖南长沙</td>
</tr>
<tr class='c2'>
<td>李四</td>
<td><input type="text" name=""></td>
<td>湖南常德</td>
</tr>
<tr class='c3'>
<td>王五</td>
<td><input type="text" name=""></td>
<td>湖南临澧</td>
</tr>
<tr class='c4'>
<td>赵六</td>
<td><input type="text" name=""></td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
// 将字符串转化为数字
var numFormat = function(val){
return $.trim(val) === '' ? 0 : parseFloat(val);
};
/**
* table根据某一列进行排序（js），table格式（<table><thead><tr><td></td></tr></thead><tbody><tr><td></td></tr></tbody></table>）
* $table: table元素
* columnNum: 按第几列进行排序
* isAscending: 是否正序排列（默认为false降序排列，否则为true升序排列）
*/
var sortByColumn = function($table, columnNum, isAscending){
var tableRows = $table.find('tbody tr');
var returnArr = tableRows;
var length = returnArr.length;
columnNum = columnNum - 1;
if (isAscending) {
// 升序排列
for (var x = 0; x < length; x++) {
for (var y = x + 1; y < length; y++) {
var current = tableRows.eq(x).find('td').eq(columnNum).children().val();
var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();
if (numFormat(current) > numFormat(latter)) {
var temp = returnArr[x];
returnArr[x] = returnArr[y];
returnArr[y] = temp;
}
}
}
} else {
// 降序排列
for (var x = length-1; x >= 0; x--) {
for (var y = x - 1; y >= 0; y--) {
var current = tableRows.eq(x).find('td').eq(columnNum).children().val();
var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();
if (numFormat(current) > numFormat(latter)) {
var temp = returnArr[x];
returnArr[x] = returnArr[y];
returnArr[y] = temp;
}
}
}
}
// 最后正常输出
for (var x = 0; x < length; x++) {
returnArr[x].parentNode.appendChild(returnArr[x]);
}
};
// 降序
$('.descendingOrder').on('click', function(){
var table = $('#tableId');
sortByColumn($('#tableId'), 2);
});
// 升序
$('.ascendingOrder').on('click', function(){
var table = $('#tableId');
sortByColumn($('#tableId'), 2, true);
});
</script>
</body>
</html>