var table = document.getElementById("showTable"); // 添加事件监听器以在单击表头时对表格进行排序 dateHeader.addEventListener("click", function () { // 获取表格主体中的行 var rows = table.tBodies[0].rows; // 将日期字符串转换为Date对象并将其存储在数组中 var dates = []; for (var i = 0; i < rows.length; i++) { var dateStr = rows[i].cells[2].textContent; var dateParts = dateStr.split("-"); var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]); dates.push(date); } // 判断当前排序顺序并按相反的顺序对行进行排序 if (dateHeader.getAttribute("data-order") === "desc") { rows = Array.prototype.slice.call(rows); rows.sort(function (a, b) { var aDate = dates[rows.indexOf(a)]; var bDate = dates[rows.indexOf(b)]; return aDate - bDate; }); dateHeader.setAttribute("data-order", "asc"); } else { rows = Array.prototype.slice.call(rows); rows.sort(function (a, b) { var aDate = dates[rows.indexOf(a)]; var bDate = dates[rows.indexOf(b)]; return bDate - aDate; }); dateHeader.setAttribute("data-order", "desc"); } // 使用排序后的行更新表格 for (var i = 0; i < rows.length; i++) { table.tBodies[0].appendChild(rows[i]); } });,请优化上述代码,实现点击table表格的时间表头,可以降序或者升序
时间: 2023-11-22 21:55:04 浏览: 81
TypeError document.getElementById(...) is null错误原因
可以使用以下代码来优化上述代码,实现通过点击表格的日期表头来升序或降序排列表格行:
```javascript
var table = document.getElementById("showTable");
var dateHeader = table.querySelector("#dateHeader");
var rows = Array.from(table.tBodies[0].rows);
// 将日期字符串转换为Date对象并将其存储在数组中
var dates = rows.map(function(row) {
var dateStr = row.cells[2].textContent;
var dateParts = dateStr.split("-");
return new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
});
// 添加事件监听器以在单击表头时对表格进行排序
dateHeader.addEventListener("click", function () {
// 判断当前排序顺序并按相反的顺序对行进行排序
if (dateHeader.getAttribute("data-order") === "desc") {
rows.sort(function (a, b) {
return dates[rows.indexOf(a)] - dates[rows.indexOf(b)];
});
dateHeader.setAttribute("data-order", "asc");
} else {
rows.sort(function (a, b) {
return dates[rows.indexOf(b)] - dates[rows.indexOf(a)];
});
dateHeader.setAttribute("data-order", "desc");
}
// 使用排序后的行更新表格
rows.forEach(function(row) {
table.tBodies[0].appendChild(row);
});
});
```
这段代码的优化点包括:
- 使用 `Array.from()` 方法将表格的行转换为数组,而不是使用 `for` 循环遍历。
- 使用 `map()` 方法将日期字符串转换为日期对象,并将结果存储在数组中。
- 在排序函数中直接使用 `rows.indexOf()` 方法获取行的索引,而不是使用循环变量 `i`。
- 使用 `forEach()` 方法将排序后的行添加回表格中,而不是使用 `for` 循环遍历。
阅读全文