首页使用javascript隐藏html动态表格的列

使用javascript隐藏html动态表格的列

时间: 2023-09-18 20:08:05 浏览: 175

js 实现用JavaScript隐藏或显示表格列

4星 · 用户满意度95%

js 实现用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!

您可以使用 JavaScript 来隐藏 HTML 动态表格的列。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>隐藏HTML表格的列</title> <style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h1>动态表格的列</h1> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>城市</th> <th>国家</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>25</td> <td>北京</td> <td>中国</td> </tr> <tr> <td>李四</td> <td>女</td> <td>30</td> <td>上海</td> <td>中国</td> </tr> <tr> <td>John</td> <td>男</td> <td>35</td> <td>New York</td> <td>USA</td> </tr> </tbody> </table> <br> <button onclick="hideColumn(3)">隐藏城市列</button> <button onclick="hideColumn(4)">隐藏国家列</button> <br><br> <script type="text/javascript"> function hideColumn(colIndex) { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { var cells = rows[i].getElementsByTagName("td"); if (cells.length > colIndex) { cells[colIndex].style.display = "none"; } } } </script> </body> </html> ``` 这个示例代码中包含一个动态表格，以及两个按钮，分别用于隐藏“城市”列和“国家”列。当用户单击按钮时，JavaScript 函数 `hideColumn()` 会在表格中隐藏相应的列。您只需要指定要隐藏的列的索引即可。该函数首先获取表格（使用 `getElementById()` 方法），然后获取所有行和单元格。如果单元格的数量大于要隐藏的列的索引，则将其样式设置为 `display:none`，从而隐藏该列。

阅读全文