实现: 多次冻结标题、冻结第一列并折叠行。
已实现:冻结标题,冻结第一列并仅折叠一次。
到目前为止我的代码:
</head>
<body>
<div class="table-container">
<table>
<thead class="freeze-header">
<tr>
<th class="freeze-col">Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1.1, Column 1</td>
<td>Row 1.1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table><tbody><tr>
<td>Row 1.1.1, Column 1</td>
<td>Row 1.1.1, Column 2</td>
</tr></tbody></table></td></tr></tbody></table></td></tr>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody></table></div>
<script>
// JavaScript to handle collapse functionality
document.querySelectorAll('.parent-row').forEach(function(row) {
row.addEventListener('click', function() {
var nextRow = row.nextElementSibling;
if (nextRow && nextRow.classList.contains('collapse')) {
nextRow.classList.toggle('show');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
}
});
});
</script>
如何实现与下图相同的效果?谢谢。 布局实现
要实现冻结表头、冻结第一列以及折叠表中的多行,您可以稍微修改现有代码。这是包含以下功能的更新版本:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.table-container {
overflow-x: auto;
max-width: 100%;
position: relative;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th.freeze-col, td.freeze-col {
position: sticky;
left: 0;
background-color: #f2f2f2;
}
.freeze-header th {
position: sticky;
top: 0;
background-color: #f2f2f2;
}
.collapse {
display: none;
}
.collapse.show {
display: table-row;
}
.collapse td {
padding-left: 30px;
}
.collapse .freeze-col {
position: static;
background-color: #fff;
}
.collapse-icon {
cursor: pointer;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead class="freeze-header">
<tr>
<th class="freeze-col">Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1.1, Column 1</td>
<td>Row 1.1, Column 2</td>
<td>Row 1.1, Column 3</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table>
<tbody>
<tr>
<td>Row 1.1.1, Column 1</td>
<td>Row 1.1.1, Column 2</td>
<td>Row 1.1.1, Column 3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</div>
<script>
document.querySelectorAll('.parent-row').forEach(function(row) {
row.addEventListener('click', function() {
var nextRow = row.nextElementSibling;
if (nextRow && nextRow.classList.contains('collapse')) {
nextRow.classList.toggle('show');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
}
});
});
</script>
</body>
</html>
在此更新的代码中,我添加了 CSS 样式来冻结第一列和标题,并处理折叠的行。处理折叠功能的 JavaScript 函数保持不变。您可以进一步自定义样式以满足您的设计要求。