html左边tree右边table
时间: 2024-01-11 08:21:52 浏览: 26
以下是实现左边树状图,点击每一个区域,右边表格加载对应的区域及其下级区域的HTML代码示例:
```html
<div class="container">
<div class="tree">
<ul>
<li>
<span class="node">区域1</span>
<ul>
<li>
<span class="node">子区域1.1</span>
</li>
<li>
<span class="node">子区域1.2</span>
</li>
</ul>
</li>
<li>
<span class="node">区域2</span>
<ul>
<li>
<span class="node">子区域2.1</span>
</li>
<li>
<span class="node">子区域2.2</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="table">
<table>
<thead>
<tr>
<th>区域</th>
<th>下级区域</th>
</tr>
</thead>
<tbody>
<tr>
<td>区域1</td>
<td>子区域1.1</td>
</tr>
<tr>
<td>区域1</td>
<td>子区域1.2</td>
</tr>
</tbody>
</table>
</div>
</div>
```
CSS样式可以根据需要自行添加。以上代码中,左边使用了一个树状结构,每个区域都是一个可点击的节点,点击节点可以展开或折叠其下级区域。右边是一个表格,根据点击的区域显示对应的区域及其下级区域的数据。