js如何实现点击显示和隐藏表格
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如何实现点击显示和隐藏表格的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- 一款js点击显示和隐藏的例子(pc,移动端通用)
html部分: <div id="box"> <div id="box_title">标题</div> <div id ...
- vueJS简单的点击显示与隐藏的效果
目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...
- 原生js控制控制--弹窗的显示和隐藏
以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红 html代码: <button id ...
- JS 中div内容的显示和隐藏
1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...
- js+css+div的点击后显示或者隐藏
<html ><head><meta charset=utf-8 /><title>JS Bin</title></head> ...
随机推荐
- vanzo-代码共享平台地址
网页编辑.烧录代码 1.登录服务器 192.168.1.52 2.选择modules 3.选择builder 4.在 Project Name:填入要拉的项目名 选择版本:user,eng,userd ...
- android-铃声的设置与播放
在android系统中,不同铃声存放的铃声路径: /system/media/audio/ringtones 来电铃声 /system/media/audio/notifications 短信通知铃声 ...
- 软件——机器学习与Python,Python3的输出与输入
输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...
- ThinkPHP5.0的安装
ThinkPHP5.0的安装很简单: 1.下载“phpstudy”安装 2.下载thinkphp源文件 3.把thinkphp源文件解压并放到phpstudy目录下的“WWW”目录 4.然后开启服务并 ...
- Codeforces Round #460 (Div. 2) E. Congruence Equation (CRT+数论)
题目链接: http://codeforces.com/problemset/problem/919/E 题意: 让你求满足 \(na^n\equiv b \pmod p\) 的 \(n\) 的个数. ...
- CSS笔记 - fgm练习 2-7 - 简易选项卡
练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...
- VMWare中装Linux系统常见问题
1.安装VMWare的时候,可能会提示vtx-m没开启 解决办法:重启笔记本电脑,按完开机键后,按住del或者F1或者F2,进入BIOS,在BIOS中找到intel-cietue开关,开启就 可以(如 ...
- DC针对pipeline的优化
set_optimize_register true compile -ultra 调整pipleline各级的组合逻辑,使得各级组合逻辑的延迟跟接近 对非pipeline进行优化: regi ...
- SpringBoot日志logback-spring.xml分环境(转)
springboot按照profile进行打印日志 log4j logback slf4j区别? 首先谈到日志,我们可能听过log4j logback slf4j这三个名词,那么它们之间的关系是怎么样 ...
- [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 ...