用div css 实现 树形表格 demo
时间: 2024-01-24 09:20:18 浏览: 26
下面是一个简单的树形结构表格的示例代码:
HTML代码:
```html
<div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>大小</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="expand"></span>
文件夹1
</td>
<td>-</td>
<td>文件夹</td>
</tr>
<tr class="sub-item">
<td>
<span class="expand"></span>
文件夹1-1
</td>
<td>-</td>
<td>文件夹</td>
</tr>
<tr class="sub-item">
<td>
<span class="expand"></span>
文件夹1-2
</td>
<td>-</td>
<td>文件夹</td>
</tr>
<tr>
<td>
<span class="expand"></span>
文件1
</td>
<td>10KB</td>
<td>文件</td>
</tr>
<tr>
<td>
<span class="expand"></span>
文件2
</td>
<td>20KB</td>
<td>文件</td>
</tr>
<tr>
<td>
<span class="expand"></span>
文件3
</td>
<td>30KB</td>
<td>文件</td>
</tr>
</tbody>
</table>
</div>
```
CSS代码:
```css
.table-container {
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
thead {
background-color: #f5f5f5;
}
th {
padding: 0.5rem;
text-align: left;
}
td, th {
border: 1px solid #ddd;
padding: 0.5rem;
}
tr.sub-item {
display: none;
}
tr.sub-item.visible {
display: table-row;
}
span.expand {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
background-image: url('https://cdn.icon-icons.com/icons2/1380/PNG/512/vcsconflicting_93497.png');
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
tr.parent-row span.expand {
background-image: url('https://cdn.icon-icons.com/icons2/1380/PNG/512/vcsnormal_93493.png');
}
tr.sub-item span.expand {
margin-left: 20px;
}
```
JavaScript代码:
```javascript
const rows = document.querySelectorAll('.parent-row');
rows.forEach(row => {
const expandBtn = row.querySelector('span.expand');
expandBtn.addEventListener('click', () => {
row.classList.toggle('expanded');
const subItems = row.nextElementSibling.querySelectorAll('.sub-item');
subItems.forEach(subItem => {
subItem.classList.toggle('visible');
});
});
});
```
代码解析:
上面的示例代码使用了 div 和 table 标签来实现树形结构表格。其中,使用 table 标签来定义表格的结构和样式,使用 div 标签来控制表格的滚动。
CSS样式中定义了表格的样式,使用了 display 属性来控制子项的显示和隐藏。使用了 background-image 属性来设置展开和收起按钮的图标。
JavaScript代码中,使用了事件监听器来监听展开和收起按钮的点击事件,根据按钮的状态来显示或隐藏子项。同时,使用了 classList 属性来动态修改表格行的类名,来实现展开和收起的效果。