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>

三、測試題-簡答題