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、代码
演示文档
标题1
单元格11单元格12单元格13单元格21单元格22单元格23单元格31单元格32单元格33备注:
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
}
三、测试题-简答题
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控制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部分:
标题
vueJS简单的点击显示与隐藏的效果
目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...
原生js控制控制--弹窗的显示和隐藏
以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红 html代码:
JS 中div内容的显示和隐藏
1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...
js+css+div的点击后显示或者隐藏
JS Bin ...
随机推荐
css圆角边框
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
c/c++面试题(4)字符串翻转/打印任意进制格式/类型转换
1.字符串的翻转,这里一般是字符数组.不包括字符串字面值. char* reversal_str(char* str,size_t size); 翻转之后的字符串是原来的字符串的翻转. #includ ...
error C3163: “_vsnprintf”: 属性与以前的声明不一致
这是在vs中遇到的错误,vs以前没有,vs以后的vs也没有. c:\program files\microsoft visual studio 9.0\vc\include\s ...
LSTM/RNN的应用Case
作者:许铁-巡洋舰科技链接:/question/37082800/answer/126430702来源:知乎著作权归作者所有,转载请联系作者获得授权. 作者: ...
if条件
-e filename 如果 filename存在,则为真-d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真-L filen ...
Installing Ubuntu on a Pre-Installed Windows 8 (64-bit) System (UEFI Supported)
/questions/221835/installing-ubuntu-on-a-pre-installed-windows-8-64-bit-system-u ...
[Locked] Two Sum
Two Sum II - Input array is sorted Given an array of integers that is alreadysorted in ascending or ...
怎么给qt程序添加版本信息
windows下的可执行文件的属性中有版本这个信息,她含有版本信息,描述,版权等等.对于qt的程序,要含有这样的信息,该怎么办呢?那就如下操作吧:新建***.rc文件,在rc文件填入下的信息 #if ...
elasticsearch+spark+hbase 整合
1.用到的maven依赖 org.apache.sparksp ...
const的引用
const的引用 对常量的引用:把引用绑定到const对象上,就像绑定到其他对象上一样,不能被用作修改它所绑定的对象: ; const int &r1 = ci;//正确:引用及其对应的对象都 ...