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. vanzo-代码共享平台地址

    网页编辑.烧录代码 1.登录服务器 192.168.1.52 2.选择modules 3.选择builder 4.在 Project Name:填入要拉的项目名 选择版本:user,eng,userd ...

  2. android-铃声的设置与播放

    在android系统中,不同铃声存放的铃声路径: /system/media/audio/ringtones 来电铃声 /system/media/audio/notifications 短信通知铃声 ...

  3. 软件——机器学习与Python,Python3的输出与输入

    输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...

  4. ThinkPHP5.0的安装

    ThinkPHP5.0的安装很简单: 1.下载“phpstudy”安装 2.下载thinkphp源文件 3.把thinkphp源文件解压并放到phpstudy目录下的“WWW”目录 4.然后开启服务并 ...

  5. Codeforces Round #460 (Div. 2) E. Congruence Equation (CRT+数论)

    题目链接: http://codeforces.com/problemset/problem/919/E 题意: 让你求满足 \(na^n\equiv b \pmod p\) 的 \(n\) 的个数. ...

  6. CSS笔记 - fgm练习 2-7 - 简易选项卡

    练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...

  7. VMWare中装Linux系统常见问题

    1.安装VMWare的时候,可能会提示vtx-m没开启 解决办法:重启笔记本电脑,按完开机键后,按住del或者F1或者F2,进入BIOS,在BIOS中找到intel-cietue开关,开启就 可以(如 ...

  8. DC针对pipeline的优化

    set_optimize_register    true compile  -ultra 调整pipleline各级的组合逻辑,使得各级组合逻辑的延迟跟接近 对非pipeline进行优化: regi ...

  9. SpringBoot日志logback-spring.xml分环境(转)

    springboot按照profile进行打印日志 log4j logback slf4j区别? 首先谈到日志,我们可能听过log4j logback slf4j这三个名词,那么它们之间的关系是怎么样 ...

  10. [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

    Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate betwee ...