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

最新推荐文章于 2023-04-26 14:27:49 发布

原创最新推荐文章于 2023-04-26 14:27:49 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的表格排序插件。该插件通过点击表头进行排序，支持升序和降序操作。文章详细展示了如何使用jQuery选择器获取表格元素，并通过JavaScript实现了对表格内容的排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>