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. 转换PHP脚本成为windows的执行程序

    转换PHP脚本成为windows的执行程序 Convert a PHP script into a stand-alone windows executable I want to automate ...

  2. 编码与乱码(05)---GBK与UTF-8之间的转换--转载

    原文地址:http://www.blogjava.net/pengpenglin/archive/2010/02/22/313669.html [GBK转UTF-8] 在很多论坛.网上经常有网友问“  ...

  3. C#操作session的类实例

    本文实例讲述了C#操作session的类.分享给大家供大家参考.具体分析如下: 这个C#类对session操作进行了再次封装,可以大大简化session的常用操作,同时这个类可以将session值设置 ...

  4. 原生js大总结十

    91.ajax的优点     a.提高运行效率   b.提高用户体验,让多件事情同时发生   c.在不刷新页面的情况下可以对局部数据进行加载和刷新       92.ajax请求的流程   1.创建通 ...

  5. Excel 下拉菜单制作

    废话少说吧,以图明示: 图1 操作步骤(环境为Office 2013) 备注,第四步,可以选择页面中的数据源,也可以以“,”分割的方式输入字符串 图2 制作效果

  6. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  7. Altium Designer线如何跟着原件走

  8. linux cmd cp -a

    cp -a 在保留原文件属性的前提下复制文件    cp -r dirname destdir   复制目录后其文件属性会发生变化 想要使得复制之后的目录和原目录完全一样,可以使用cp -a dirn ...

  9. SVGALib

    SVGALib是一套运行于Linux及FreeBSD下的开放源代码低阶绘图函式库,它允许程式设计人员变更视讯模式及全屏幕图像,许多热门的电脑游戏如Quake及Doom都源自此技术. 范例 编辑 #in ...

  10. 【习题 5-8 UVA - 230】Borrowers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用map+set写个模拟就好. 3个区域 书架.桌子.别人的手上. 其中前两个区域的书都能借出去. [代码] #include &l ...