html显示隐藏内容点击显示数据表代码,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、代码

演示文档

标题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&quot ...

一款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&plus;css&plus;div的点击后显示或者隐藏

JS Bin  ...

随机推荐

css圆角边框

一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

c&sol;c&plus;&plus;面试题&lpar;4&rpar;字符串翻转&sol;打印任意进制格式&sol;类型转换

1.字符串的翻转,这里一般是字符数组.不包括字符串字面值. char* reversal_str(char* str,size_t size); 翻转之后的字符串是原来的字符串的翻转. #includ ...

error C3163&colon; &OpenCurlyDoubleQuote;&lowbar;vsnprintf”&colon; 属性与以前的声明不一致

这是在vs2008中遇到的错误,vs2008以前没有,vs2008以后的vs也没有. c:\program files\microsoft visual studio 9.0\vc\include\s ...

LSTM&sol;RNN的应用Case

作者:许铁-巡洋舰科技链接:https://www.zhihu.com/question/37082800/answer/126430702来源:知乎著作权归作者所有,转载请联系作者获得授权. 作者: ...

if条件

-e filename 如果 filename存在,则为真-d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真-L filen ...

Installing Ubuntu on a Pre-Installed Windows 8 &lpar;64-bit&rpar; System &lpar;UEFI Supported&rpar;

http://askubuntu.com/questions/221835/installing-ubuntu-on-a-pre-installed-windows-8-64-bit-system-u ...

&lbrack;Locked&rsqb; Two Sum

Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascending or ...

怎么给qt程序添加版本信息

windows下的可执行文件的属性中有版本这个信息,她含有版本信息,描述,版权等等.对于qt的程序,要含有这样的信息,该怎么办呢?那就如下操作吧:新建***.rc文件,在rc文件填入下的信息 #if ...

elasticsearch&plus;spark&plus;hbase 整合

1.用到的maven依赖 org.apache.sparksp ...

const的引用

const的引用 对常量的引用:把引用绑定到const对象上,就像绑定到其他对象上一样,不能被用作修改它所绑定的对象: ; const int &r1 = ci;//正确:引用及其对应的对象都 ...