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. linux又一次编译安装gd，添加freetype支持,解决验证码不显示问题，Fatal error: Call to undefined function imagettftext()

    问题: Fatal error: Call to undefined function Think\imagettftext() in /var/www/webreg/ThinkPHP/Library ...

  2. Android RGB颜色对比表

    一  RGB颜色对照表:        注:内容来自http://rgb.phpddt.com/   里面有在线颜色摄取器   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF0 ...

  3. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  4. Ab工具基本使用

    Ab简介 ab是apache自带的压力测试工具,ab是apachebench命令的缩写. ab不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试. ab是一个ht ...

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

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

  6. 全面解析Activity的生命周期

    欢迎Follow我的GitHub, 关注我的CSDN. 在Android应用中, Activity是最重要的组件, 其生命周期(Lifecycle)被大家所熟知. 可是, 大家须要注意一些细节, 才干 ...

  7. BUFSIZ

    转http://www.judymax.com/archives/262 今天在看示例程序时冒出来一句args = emalloc(BUFSIZ); BUFSIZ是什么意思,查了一下才明白. 这是st ...

  8. 再谈ITFriend网站的定位

    在网站开发阶段.内部测试阶段.公开测试阶段,让诸多好友和网友,参与了我们的网站ITFriend的体验和测试.其中,大家非常关心,我们的网站是干什么的.在我们不做任何解释的情况下,有的网站认为ITFri ...

  9. 【习题 3-3 UVA-1225】Digit Counting

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

  10. DSO Framer _ WinForm 使用

    根据自己对dsoframer控件的学习,想把dsoframer控件进行简单的包装为C#的usercontrol,大体需要作如下:(创建windows的usercontrol的步骤就不再说了...)我们 ...