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. mysql中load data Infile运用

    速度比insert要快20倍.共享一下java程序操作. package com.mysql.csv; import java.sql.Connection; import java.sql.Driv ...

  2. matlab 辅助函数 —— 文件下载与文件解压

    0. 可读性的提升 为了提升代码的交互友好性,可在代码执行一些耗时操作时,显示地输出一些文本信息,以显示进度: fprintf('Downloading xxfilename...\n') urlwr ...

  3. ajax的post请求与编码

    window.onload = function(){ document.getElementById('username').onblur = function(){ var name = docu ...

  4. iOS_04_数据类型、常量、变量

    一.数据 1.什么是数据 * 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据,图片数据,视频数据,还有聊天QQ产生的文 ...

  5. 软件——机器学习与Python，输入输出的用法

    转自:http://www.cnblogs.com/graceting/p/3875438.html 输入很简单 x = input("Please input x:") Plea ...

  6. （转）bat批处理的注释语句

    在批处理中,段注释有一种比较常用的方法: goto start = 可以是多行文本,可以是命令 = 可以包含重定向符号和其他特殊字符 = 只要不包含 :start 这一行,就都是注释 :start 另 ...

  7. springboot整合freemarker(转)

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  8. Qt5 UI信号、槽自动连接的控件重名大坑（UI生成的槽函数存在一个隐患，即控件重名。对很复杂的控件，不要在 designer 里做提升，而是等到程序启动后，再动态创建，可以避免很多问题）

    对Qt5稍有熟悉的童鞋都知道信号.槽的自动连接机制.该机制使得qt designer 设计的UI中包含的控件,可以不通过显式connect,直接和cpp中的相应槽相关联.该机制的详细文章见 http: ...

  9. css选择器.md

    css选择器总结 1.元素选择器 如:*{},body{},p{} ; xml中note{},to{},from{} 2.class与id选择器 如:.class{},#id{} 3.伪类选择器 选择 ...

  10. 【Codeforces Round #440 (Div. 2) B】Maximum of Maximums of Minimums

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] k=1的时候就是最小值, k=2的时候,暴力枚举分割点. k=3的时候,最大值肯定能被"独立出来",则直接输出最 ...