js如何实现点击显示和隐藏表格

最新推荐文章于 2023-04-27 14:00:22 发布

weixin_34275734

最新推荐文章于 2023-04-27 14:00:22 发布

阅读量805

点赞数

文章标签：前端 java javascript ViewUI

js如何实现点击显示和隐藏表格

一、总结

一句话总结：

1、给table或者table里面的元素添加点击事件，

2、然后判断当前表格的数据显示或者隐藏，

3、然后通过display属性显示（非none）或者隐藏（值为none）表格中的数据

1、表格的行中如何合并表格的列？

解答：用colspan属性即可，比如合并三个单元格：colspan="3"

2、js中bool类型的变量如何取反？

解答：把非自己赋给自己。isHide=!isHide

3、表格中的rows属性是元素（element）么？

解答：是，比如rows[i].style.display='';

4、如何将一个元素的内容隐藏？

解答：将display属性设置为none

5、如何一个通过display属性隐藏的元素显示？

解答：将display的属性none去掉，可以通过赋空值去掉它rows[i].style.display='';

6、html中display是样式么？

解答：是的，例如：rows[i].style.display='none';

二、js如何实现点击显示和隐藏表格

1、隐藏表格数据案例说明

实例描述：
点击标题行后隐藏表格数据，再次点击则显示数据

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     </style>
 8 </head>
 9 <body>
10     <table id="tab" border="1" width="300">
11     <caption>表格名称</caption>
12     <thead>
13         <tr>
14             <th colspan="3" onclick="hideTab()">标题1</th>
15         </tr>
16     </thead>
17     <tbody>
18         <tr>
19             <td>单元格11</td>
20             <td>单元格12</td>
21             <td>单元格13</td>
22         </tr>
23         <tr>
24             <td>单元格21</td>
25             <td>单元格22</td>
26             <td>单元格23</td>
27         </tr>
28         <tr>
29             <td>单元格31</td>
30             <td>单元格32</td>
31             <td>单元格33</td>
32         </tr>
33         </tbody>
34         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>
35     </table>
36     <script>
37     var isHide=false;
38     function hideTab(){
39         var tab=document.getElementById('tab') 
40         var rows=tab.rows;
41         var len=tab.rows.length;
42         // tab.style.display='';
43         for(var i=1;i < len;i++){
44             if (isHide) {
45                 rows[i].style.display='';
46             }else{
47                 rows[i].style.display='none';
48             }
49         }
50         isHide=!isHide
51     }
52     
53     </script>
54 </body>
55 </html>

三、测试题-简答题