table中 点击总公司行 跳出所有子公司行
时间: 2023-10-25 16:09:01 浏览: 31
要实现在表格中点击总公司行后跳出所有子公司行的功能,您可以使用JavaScript和HTML来实现。以下是一个简单的示例代码,展示了如何根据点击事件显示或隐藏子公司行:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
.sub-companies {
display: none;
}
</style>
</head>
<body>
<h2>公司列表</h2>
<table id="myTable">
<tr onclick="toggleSubCompanies(this)">
<th>公司名称</th>
</tr>
<tr class="sub-companies">
<td>子公司1</td>
</tr>
<tr class="sub-companies">
<td>子公司2</td>
</tr>
<tr class="sub-companies">
<td>子公司3</td>
</tr>
</table>
<script>
function toggleSubCompanies(row) {
var subCompanies = row.nextElementSibling;
if (subCompanies.style.display === "none") {
subCompanies.style.display = "table-row"; // 显示子公司行
} else {
subCompanies.style.display = "none"; // 隐藏子公司行
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了JavaScript的`onclick`事件来绑定总公司行的点击事件。当总公司行被点击时,`toggleSubCompanies()`函数会被调用,并将被点击的行作为参数传入。该函数通过获取被点击行的下一个兄弟元素,也就是子公司行的容器元素,并根据其当前的显示状态来切换显示或隐藏。
在CSS中,我们将子公司行的初始显示状态设置为`display: none;`,使它们在页面加载时隐藏起来。然后,通过JavaScript中的`toggleSubCompanies()`函数来切换其显示状态。同时,我们将子公司行的样式设置为`display: table-row;`,以确保它们以表格行的形式进行显示。
希望这个示例能帮助您实现所需的功能!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)