编写一个HTML具有表头排序功能的表格
时间: 2024-03-22 13:41:41 浏览: 104
漂亮的html 表格排序实现
5星 · 资源好评率100%
好的,我可以帮你编写一个HTML具有表头排序功能的表格。
首先,我们需要使用HTML表格标签来创建一个表格,并使用以下代码块来创建一个具有表头排序功能的表格:
```html
<table id="myTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
<th onclick="sortTable(2)">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Doe</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Smith</td>
<td>20</td>
<td>Paris</td>
</tr>
</tbody>
</table>
```
在上面的代码中,我们使用了HTML表格标签来创建一个表格,并使用thead标签来创建表头。在表头中,我们使用th标签来创建每个表头单元格,并使用onclick属性来调用JavaScript函数sortTable()。在sortTable()函数中,我们可以实现表格排序的逻辑。
接下来,我们需要编写JavaScript函数sortTable()来实现表格排序。以下是一个示例函数:
```javascript
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.getElementsByTagName("tr");
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
```
在上面的代码中,我们首先获取表格和所有行,然后使用冒泡排序算法来实现表格排序。我们使用dir变量来跟踪表格排序的顺序,并在需要时更改它。我们还使用shouldSwitch变量来指示两行是否需要交换,以便正确排序。
最后,您可以将上述HTML和JavaScript代码复制并粘贴到HTML文件中,以创建具有表头排序功能的表格。
阅读全文