table中集团公司和分公司合并显示,点击集团公司显示隐藏的分公司
时间: 2024-04-13 16:29:18 浏览: 20
您好!对于您的需求,可以使用JavaScript来实现点击集团公司时显示或隐藏分公司的功能。您可以在表格的集团公司行中添加一个按钮或链接,当点击该按钮或链接时,通过JavaScript来动态修改分公司行的显示状态。
以下是一个简单的示例代码,您可以根据您的实际情况进行调整:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格显示隐藏</title>
<style>
.subCompany {
display: none;
}
</style>
<script>
function toggleSubCompany() {
var subCompanies = document.getElementsByClassName("subCompany");
for(var i = 0; i < subCompanies.length; i++) {
if(subCompanies[i].style.display === "none") {
subCompanies[i].style.display = "table-row";
} else {
subCompanies[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>公司名称</th>
<th>类型</th>
</tr>
<tr>
<td><button onclick="toggleSubCompany()">集团公司</button></td>
<td>集团</td>
</tr>
<tr class="subCompany">
<td>分公司1</td>
<td>分公司</td>
</tr>
<tr class="subCompany">
<td>分公司2</td>
<td>分公司</td>
</tr>
</table>
</body>
</html>
```
在上述代码中,我们使用了一个名为`toggleSubCompany`的JavaScript函数来切换分公司行的显示状态。当点击集团公司行中的按钮时,这个函数会将所有带有`subCompany`类名的行的显示状态进行切换。
您可以根据实际情况修改表格结构和样式,并适配您的业务逻辑。希望对您有所帮助!如果您有其他问题,请随时提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)