下面是一个简单的树形结构
表格的示例代码：
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 属性来动态修改
表格行的类名，来
实现展开和收起的
效果。
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
