table中有几家总公司,总公司下有分公司,开始分公司隐藏,点击总公司显示对应分公司
时间: 2024-04-08 14:33:01 浏览: 11
要实现这样的功能,您可以使用 JavaScript 和 HTML 的事件处理程序。以下是一个示例代码:
HTML:
```html
<table>
<tr>
<td class="parent" onclick="toggleSubs(this)">总公司 1</td>
</tr>
<tr class="sub">
<td>分公司 1.1</td>
</tr>
<tr class="sub">
<td>分公司 1.2</td>
</tr>
<tr>
<td class="parent" onclick="toggleSubs(this)">总公司 2</td>
</tr>
<tr class="sub">
<td>分公司 2.1</td>
</tr>
<tr class="sub">
<td>分公司 2.2</td>
</tr>
</table>
```
JavaScript:
```javascript
function toggleSubs(element) {
var subRows = element.parentNode.nextElementSibling.getElementsByClassName('sub');
for (var i = 0; i < subRows.length; i++) {
if (subRows[i].style.display === 'none') {
subRows[i].style.display = '';
} else {
subRows[i].style.display = 'none';
}
}
}
```
在上面的示例中,我们使用了一个带有 `parent` 类的总公司行,并在单击总公司行时调用 `toggleSubs` 函数。该函数会查找下一个兄弟行中具有 `sub` 类的所有行,并切换它们的显示状态。当行的显示状态为 `none` 时,表示分公司是隐藏的,单击总公司行时会显示对应的分公司行;当行的显示状态为其他值时,表示分公司是可见的,单击总公司行时会隐藏对应的分公司行。
这只是一个简单的示例,您可以根据实际需求进行修改和扩展。希望能对您有所帮助!如有任何进一步的问题,请随时提问。
相关推荐
![sql](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)