要对表格或元素按照文本、数字或日期进行排序,JavaScript提供了多种方法,常用的有以下几种:
1. 使用Array.sort()方法
Array.sort()是JavaScript中的原生排序方法,它会原地修改数组并返回排序后的数组。要使用该方法将表格或元素排序,我们需要先将其转换成数组,再调用sort()方法即可。在sort()方法中,我们需要传入一个比较函数,该函数将决定元素的排列顺序。下面是几个示例:
按文本排序
以下是一个简单的表格,它有三列,分别是姓名、年龄和性别:
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
我们可以使用以下代码将该表格按照姓名进行排序:
function sortTableByText() {
let table = document.getElementById("myTable");
let tbody = table.getElementsByTagName("tbody")[0];
let rows = Array.from(tbody.getElementsByTagName("tr"));
rows.sort((a, b) => a.cells[0].textContent.localeCompare(b.cells[0].textContent));
tbody.append(...rows);
}
在该代码中,我们首先获取表格以及tbody元素和其中所有的行,并转换成一个数组。我们使用了Array.from()方法来将HTMLCollection对象转换成真正的数组。
然后,我们使用sort()方法,传入一个比较函数,该函数使用了localeCompare()方法对两个字符串进行比较。localeCompare()返回一个整数值,如果该值小于0,表示a应该排在b的前面,如果该值大于0,表示a应该排在b的后面,如果该值等于0,表示a和b的位置不变。
最后,我们将排序后的行依次添加回tbody元素中。
按数字排序
以下是一个简单的表格,它有三列,分别是编号、分数和姓名:
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>分数</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>80</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>75</td>
<td>李四</td>
</tr>
<tr>
<td>3</td>
<td>90</td>
<td>王五</td>
</tr>
</tbody>
</table>
我们可以使用以下代码将该表格按照分数进行排序:
function sortTableByNumber() {
let table = document.getElementById("myTable");
let tbody = table.getElementsByTagName("tbody")[0];
let rows = Array.from(tbody.getElementsByTagName("tr"));
rows.sort((a, b) => a.cells[1].textContent - b.cells[1].textContent);
tbody.append(...rows);
}
在该代码中,我们同样使用了sort()方法和Array.from()方法,但是比较函数不同于按文本排序的函数。在该函数中,我们使用了两个数字相减的方式来比较两个数字的大小,从而实现按照分数升序排序的效果。
2. 使用第三方插件
除了自己实现排序方法外,我们还可以使用第三方插件,例如tablesorter.js和dataTable.js等。这些插件通常提供了更多的功能和更好的用户体验,但是需要额外的引入和配置。
以下是一个使用tablesorter.js插件的示例,该插件可以对表格进行多重排序,支持自定义样式和事件:
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>75</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>90</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js"></script>
<script>
$(function() {
$("#myTable").tablesorter({
widgets: ["zebra", "columns"],
headers: {
2: {
sorter: "digit"
}
}
});
});
</script>
在该代码中,我们通过引入jquery.tablesorter.min.js和jquery.tablesorter.widgets.min.js文件来使用tablesorter.js插件。然后,我们在代码最后的