JS实现table表格数据排序---001

最新推荐文章于 2023-12-02 19:56:31 发布

langxuesha

最新推荐文章于 2023-12-02 19:56:31 发布

阅读量1.0k

点赞数 1

分类专栏： Jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/langxuesha/article/details/84885297

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="jquery/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.3.min.js?version=1"></script>
<script>
$(function(){
var tableObject = $('#tableSort');
var tbHead = tableObject.children('thead');
var tbHeadTh = tbHead.find('tr th');
var tbBody = tableObject.children('tbody');
var tbBodyTr = tbBody.find('tr');
var sortIndex = -1;

tbHeadTh.each(function(){
var thisIndex = tbHeadTh.index($(this));

$(this).click(function(){
checkColumnValue(thisIndex);
});
});

function checkColumnValue(index){
var trsValue = new Array();

tbBodyTr.each(function(){
var tds = $(this).find('td');
trsValue.push($(tds[index]).html() + ".separrator" + $(this).html());
$(this).html("");
});
var len = trsValue.length;

if (index == sortIndex){
trsValue.reverse();
} else {
for (var i = 0; i < len; i++) {
for( var j = i + 1; j < len; j++) {
value1 = trsValue[i].split(".separrator")[0];
value2 = trsValue[j].split(".separrator")[0];
if (value1.localeCompare(value2) > 0) {
var temp = trsValue[i];
trsValue[i] = trsValue[j];
trsValue[j] = temp;
}
}

}
}
for (var i = 0; i < len; i++) {
$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separrator")[1]);
}
sortIndex = index;

}
});
</script>
</head>
<body>
<div class="wrap">

<table id="tableSort" border="1">
<thead>
<tr>
<th>aaa </th>
<th>id </th>
<th>fff </th>
<th>dd </th>
<th>fffff </th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>2256</td>
<td>8800</td>
<td>54</td>
<td>73</td>
</tr>
<tr>
<td>sss</td><td>2011</td><td>5900</td><td>71</td><td>52</td>
</tr>
<tr>
<td>11.22.33.44</td><td>99.99</td><td>5900</td><td>71</td><td>52</td>
</tr>
<tr>
<td>22.22.33.44</td><td>20.11</td><td>5900</td><td>71</td><td>52</td>
</tr>
<tr>
<td>33.22.33.44</td><td>888.88</td><td>5900</td><td>71</td><td>52</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>