使用tablesorter插件实现表格排序
新建一个index.html文件
注意:一点要结合thead和tbody使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./theme.default.css" />
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.tablesorter.min.js"></script>
<script
type="text/javascript"
src="./jquery.tablesorter.widgets.min.js"
></script>
<style>
.tablesorter thead th {
background: #666666;
}
.tablesorter tbody td {
background: #ffffbd;
}
</style>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>head</td>
<td>jsmith@email.com</td>
<td>$50.00</td>
<td>http://www.111.com</td>
</tr>
<tr>
<td>333</td>
<td>mouth</td>
<td>mouth@email.com</td>
<td>$50.00</td>
<td>http://www.333.com</td>
</tr>
<tr>
<td>222</td>
<td>nose</td>
<td>nose@email.com</td>
<td>$100.00</td>
<td>http://www.222.com</td>
</tr>
<tr>
<td>555</td>
<td>face</td>
<td>face@email.net</td>
<td>$50.00</td>
<td>http://www.555.com</td>
</tr>
</tbody>
</table>
<script>
$(function () {
$("#myTable").tablesorter();
});
</script>
</body>
</html>
下载这几个文件
把这些文件放在同级使用
jQuery cdn
tablesorter cdn 找到以下文件