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. 洛谷 P1689 方程求解

    P1689 方程求解 题目描述 给一个方程,形如X+Y=Z或X-Y=Z.给出了其中两个未知数,请求出第三个数.未知数用‘?’表示,等式中也许会出现一些多余的空格. 输入输出格式 输入格式: 一行,方程 ...

  2. 执行spark-shell时遇到的主机地址的错误

    下载了spark 1.4,执行spark-shell时遇到以下错误: java.net.UnknownHostException: UKON-M-Q0EP: UKON-M-Q0EP: nodename ...

  3. 【习题 6-3 UVA - 536】 Tree Recovery

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归题 [代码] #include <bits/stdc++.h> using namespace std; const ...

  4. 【CS Round #43 A】Expected Dice

    [链接]https://csacademy.com/contest/round-43/task/expected-dice/ [题意] 大水题 [题解] 把36种可能的结果都存下来. 然后把重复出现的 ...

  5. 【转】CentOS/RHEL/OracleLinux使用UDEV配置ASMDISK

    转自:http://blog.csdn.net/staricqxyz/article/details/8332566 RHEL 5 / CentOS 5 / Oracle Linux 5 [root@ ...

  6. Day1：字符编码

    一.ASCII码 ASCII(American Standard Code for Information Interchange,美国标准信息交换代码),8位,一个字节,最多只能表示255个符号. ...

  7. HibernateCRUD基础框架(2)-HQL语句构造器(HqlQueryBuilder,HqlUpdateBuilder)

    上篇讲述了最基本的实体类,本篇接着讲述HQL语句构造器,包括查询和更新等. 优点:通过面向对象的方式构造HQL语句,更快捷,不需要手动拼接HQL. 缺点:封装可能降低性能,只能支持常用的和较为简单的H ...

  8. java中的switch用String作为条件

    在开发java程序的过程中,我们遇到了条件推断首选就是switch,可是java中的switch功能不支持字符串作为条件.这时我们该怎么办呢? --使用枚举. 一.枚举简单了解    1.enum是一 ...

  9. Android NetworkOnMainThreadException异常

    看名字就应该知道,是网络请求在MainThread中产生的异常 先来看一下官网的解释: Class Overview The exception that is thrown when an appl ...

  10. 云服务器搭建 Nginx 静态网站

    第一步:安装 Nginx 在 CentOS 上,可直接使用 yum 来安装 Nginx(当然也可以通过下载压缩包.解压.编译的方式安装,不过太麻烦了) yum install nginx -y 第二步 ...