在HTML表格中对日期列进行排序,不依赖于任何外部库或框架的解决方案如下:
以下是一个示例代码:
<table id="myTable">
<thead>
<tr>
<th>Date</th>
<th>Other Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022-01-01</td>
<td>...</td>
</tr>
<tr>
<td>2022-02-15</td>
<td>...</td>
</tr>
<!-- 其他数据行 -->
</tbody>
</table>
<script>
// 获取表格元素和日期列中的所有日期数据
var table = document.getElementById("myTable");
var rows = Array.from(table.getElementsByTagName("tr"));
var dates = rows.slice(1) // 跳过表头行
.map(function(row) {
return row.cells[0].textContent; // 假设日期列是第一列
});
// 自定义排序函数,按照日期进行排序
function sortDates() {
dates.sort(function(a, b) {
return new Date(a) - new Date(b);
});
// 更新表格中的数据行顺序
rows.slice(1) // 跳过表头行
.forEach(function(row, index) {
row.cells[0].textContent = dates[index];
});
}
// 给日期列的表头添加一个可点击元素,用于触发排序操作
var dateHeader = table.getElementsByTagName("th")[0]; // 假设日期列是第一列
dateHeader.innerHTML += " <a href='#' onclick='sortDates()'>Sort</a>";
</script>
上述代码中,我们通过获取表格元素和日期数据,并使用自定义的排序函数将日期进行排序,然后更新表格中的数据行顺序。通过在日期列的表头中添加一个可点击元素,我们可以触发排序操作。请注意,此示例假设日期数据是以"YYYY-MM-DD"格式存储在表格的第一列中。
这是一个基本的解决方案,可以根据具体需求进行定制和优化。
领取专属 10元无门槛券
手把手带您无忧上云