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';

 
 

js如何实现点击显示和隐藏表格的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  3. js 冒泡事件 点击任意地方隐藏元素

    $(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...

  4. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  5. 一款js点击显示和隐藏的例子（pc，移动端通用）

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

  6. vueJS简单的点击显示与隐藏的效果

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...

  7. 原生js控制控制--弹窗的显示和隐藏

    以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红    html代码: <button id ...

  8. JS 中div内容的显示和隐藏

    1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...

  9. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

随机推荐

  1. 通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法

    现在在做的项目用到了SpringMVC框架,需要从前端angular接收请求的JSON数据,为了测试方便,所以直接先用AJAX进行测试,不过刚开始用平时用的ajax方法,提交请求会出现415或者400 ...

  2. asp.net Code学习一(vs code跨平台软件操作)

    1.命令行: dotnet new -t web 创建web项目 dotnet new restore build pubilsh run test pack dotnet -info / -h do ...

  3. Android学习笔记之滑动翻页（屏幕切换）

    如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...

  4. 2.Spring Boot 入门

    转自:https://blog.csdn.net/catoop/article/details/50501664

  5. invalid syntax 无效语法

    python用的是spyder编译器, 再出现上一行少了个括号的时候. 在下一行显示有错误.

  6. python 序列排序 排序后返回相应的索引

    https://blog.csdn.net/longwei92/article/details/83098289 https://blog.csdn.net/u013731339/article/de ...

  7. Hypervisor, computer system, and virtual processor scheduling method

    A hypervisor calculates the total number of processor cycles (the number of processor cycles of one ...

  8. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  9. 关于python的二维数组

    test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]]   #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1])           ...

  10. （转）alter database open resetlogs 的意义

    转自:http://blog.sina.com.cn/s/blog_63216bda0100zblr.html Oracle文档中提到,一旦用备份的控制文件进行数据库恢复,就需要使用resetlogs ...