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、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<table id="tab" border="1" width="300">
<caption>表格名称</caption>
<thead>
<tr>
<th colspan="3" onclick="hideTab()">标题1</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
</tr>
<tr>
<td>单元格31</td>
<td>单元格32</td>
<td>单元格33</td>
</tr>
</tbody>
<tfoot><td>备注：</td><td colspan="2"></td></tfoot>
</table>
<script>
var isHide=false;
function hideTab(){
var tab=document.getElementById('tab')
var rows=tab.rows;
var len=tab.rows.length;
// tab.style.display='';
for(var i=1;i < len;i++){
if (isHide) {
rows[i].style.display='';
}else{
rows[i].style.display='none';
}
}
isHide=!isHide
} </script>
</body>
</html>
三、测试题-简答题
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';