要在表格中按行和列排序,可以使用CSS和JavaScript结合的方法来实现。下面是一个基本的示例:
<div id="table-container">
<table id="my-table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
<td>行1 列3</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2 列2</td>
<td>行2 列3</td>
</tr>
<tr>
<td>行3 列1</td>
<td>行3 列2</td>
<td>行3 列3</td>
</tr>
</tbody>
</table>
</div>
/* 添加鼠标悬停效果 */
#my-table tbody tr:hover {
background-color: #f5f5f5;
}
/* 添加排序箭头图标 */
#my-table thead th {
cursor: pointer;
}
#my-table thead th::after {
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-left: 5px;
opacity: 0.5;
}
#my-table thead .asc::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #333;
}
#my-table thead .desc::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #333;
}
var table = document.getElementById("my-table");
var thArray = Array.from(table.getElementsByTagName("th"));
thArray.forEach(function(th, index) {
th.addEventListener("click", function() {
var rows = Array.from(table.getElementsByTagName("tr"));
var isAscending = true;
if (this.classList.contains("asc")) {
this.classList.remove("asc");
this.classList.add("desc");
isAscending = false;
} else {
this.classList.remove("desc");
this.classList.add("asc");
}
var columnIndex = index;
rows.shift(); // 移除表头行
rows.sort(function(rowA, rowB) {
var cellA = rowA.getElementsByTagName("td")[columnIndex].textContent.trim();
var cellB = rowB.getElementsByTagName("td")[columnIndex].textContent.trim();
if (isAscending) {
return cellA.localeCompare(cellB);
} else {
return cellB.localeCompare(cellA);
}
});
rows.forEach(function(row) {
table.tBodies[0].appendChild(row);
});
});
});
以上代码会根据点击的表头列进行排序,首次点击时按升序排序,再次点击则按降序排序。点击表头列时,会为对应的th
元素添加asc
或desc
类,以便显示排序箭头图标。
请注意,这只是一个基本示例,实际情况中可能需要根据具体需求进行适当的调整和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云