html带排序的table
时间: 2023-10-12 17:01:15 浏览: 50
可以使用HTML和JavaScript实现带排序的表格。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带排序的表格</title>
<style>
th {
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>20</td>
<td>80</td>
</tr>
<tr>
<td>Jerry</td>
<td>18</td>
<td>90</td>
</tr>
<tr>
<td>Mike</td>
<td>25</td>
<td>75</td>
</tr>
<tr>
<td>John</td>
<td>22</td>
<td>85</td>
</tr>
<tr>
<td>Lucy</td>
<td>19</td>
<td>95</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('myTable');
var ths = table.getElementsByTagName('th');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var arr = [];
// 将tbody中的行转换为数组
for (var i = 0; i < rows.length; i++) {
arr[i] = rows[i];
}
// 点击表头时排序
for (var i = 0; i < ths.length; i++) {
ths[i].onclick = function() {
var index = this.getAttribute('data-index');
var type = this.getAttribute('data-type');
var dataType = this.getAttribute('data-dataType');
var cellData = [];
// 将当前列的数据存入数组
for (var j = 0; j < rows.length; j++) {
var cell = rows[j].getElementsByTagName('td')[index];
var value = cell.textContent || cell.innerText;
if (dataType === 'number') {
cellData[j] = parseFloat(value);
} else if (dataType === 'date') {
cellData[j] = Date.parse(value);
} else {
cellData[j] = value;
}
}
// 根据数据类型和排序方式进行排序
if (type === 'asc') {
this.setAttribute('data-type', 'desc');
cellData.sort(function(a, b) {
return dataType === 'string' ? a.localeCompare(b) : a - b;
});
} else {
this.setAttribute('data-type', 'asc');
cellData.sort(function(a, b) {
return dataType === 'string' ? b.localeCompare(a) : b - a;
});
}
// 根据排序后的数组重排tbody中的行
for (var j = 0; j < cellData.length; j++) {
for (var k = 0; k < rows.length; k++) {
var cell = rows[k].getElementsByTagName('td')[index];
var value = cell.textContent || cell.innerText;
if (dataType === 'number') {
if (parseFloat(value) === cellData[j]) {
tbody.appendChild(rows[k]);
break;
}
} else if (dataType === 'date') {
if (Date.parse(value) === cellData[j]) {
tbody.appendChild(rows[k]);
break;
}
} else {
if (value === cellData[j]) {
tbody.appendChild(rows[k]);
break;
}
}
}
}
};
ths[i].setAttribute('data-index', i);
ths[i].setAttribute('data-type', 'asc');
ths[i].setAttribute('data-dataType', 'string');
}
</script>
</body>
</html>
```
在上述代码中,我们首先定义了一个带表头和表身的表格,并给表头的每个单元格添加了一个data-index属性,表示该单元格对应的列的索引。然后,通过JavaScript代码获取表格元素和相关元素,并将表身中的行转换为一个数组arr。
接下来,我们通过为表头的单元格绑定onclick事件来实现排序功能。在点击表头单元格时,首先获取该单元格的data-index、data-type和data-dataType属性值。其中,data-type属性表示当前排序方式(升序或降序),data-dataType属性表示当前列的数据类型(字符串、数字或日期)。
然后,我们根据data-dataType属性和当前排序方式对当前列的数据进行排序,并将排序后的数据存入一个数组cellData中。排序完成后,根据排序后的cellData数组重新排列表身中的行,并将排列后的行重新添加到表身中。
需要注意的是,本例中只实现了对字符串、数字和日期类型的数据进行排序,如果需要对其他类型的数据进行排序,还需要根据实际情况进行修改。