当前位置:首页 > 日记 > 正文

javascript实现table单元格点击展开隐藏效果 | 实例代码

javascript实现table单元格点击展开隐藏效果 | 实例代码

如果table元素的高如果不设置,是根据内容撑开的,根据这个规则,可以用js控制默认状态下table-cell的宽度,并将这一列的table-cell设置为dispaly:block,这样多出来的内容就会被隐藏掉,添加点击事件,把table-cell的display在block和table-cell之间切换,就能实现点击展开隐藏效果啦!

js代码如下:

$('.cell').click(function(){  if($(this).css('display')=='block'){    console.log('ok');    $(this).css('display','table-cell');  }else{    $(this).css('display','block');  }});

超级简单!不过设置为block之后,表格的border重叠就会失效,要对这个动态的列单独再设置一下样式,去掉它的边框~

相关文章

JavaScript之DOM_动力节点Java学院

JavaScript之DOM_动力节点Java学院

学院,节点,动力,电脑软件,JavaScript,由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:更新:更新该DOM节点的内容,相当于更新了…

Yii2.0中使用js异步删除示例

Yii2.0中使用js异步删除示例

删除,异步,示例,电脑软件,js,整理文档,搜刮出一个Yii2.0中使用js异步删除示例,稍微整理精简一下做下分享。控制器:public function actionWeixinnotificationdel(){ $model = WxDistributorNotification::findOne($_GET['id']); if ($model)…

Excel中2010进行自动填充数据的操

Excel中2010进行自动填充数据的操

自动填充,数据,操作技巧,操作步骤,电脑软件,  序列填充是Excel中提供的最常用的快速输入技术之一。在Excel中可以通过以下途径进行数据的自动填充。今天,小编就教大家在Excel中2010进行自动填充数据的操作技巧。Excel中2010进行自动填充数…

JS实现页面打印功能

JS实现页面打印功能

页面,功能,电脑软件,JS,打印整个页面示例1.可直接在按钮添加调用打印方法:<input type='button' value='打印整页' onclick='javascript:window.print();' />示例2.也可调用JS方法<html><head><script type="text/javascript">funct…

ES6解构赋值实例详解

ES6解构赋值实例详解

赋值,详解,实例,电脑软件,本文实例讲述了ES6解构赋值。分享给大家供大家参考,具体如下:基本用法let [x, y, ...z] = ['a']//"a", undefined, []1.等号右边如果不是数组,将会报错(不是可遍历结构)2.解构赋值 var, let, const命令声明均适用3.…

关于vue.js发布后路径引用的问题解

关于vue.js发布后路径引用的问题解

引用,路径,电脑软件,vue,js,本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的但是一旦放在了…

import与export在node.js中的使用

import与export在node.js中的使用

详解,电脑软件,export,import,js,简述import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码。(关于node.js模块,可参考其他node.js模块化的文章)export 曝露使用export可以曝露出方…

ppt2010电脑版怎么安装动画大师

ppt2010电脑版怎么安装动画大师

动画,安装,步骤,大师,电脑软件,  为了方便我们在ppt中对动画的制作,我们可以在ppt中安装动画大师,那么,你知道怎样在ppt中安装动画大师吗?下面就让小编告诉你 如何在ppt中安装动画大师的方法,希望看完本教程的朋友都能学会并运用起来。在ppt…

在PPT2007中怎么对多个对象同时执

在PPT2007中怎么对多个对象同时执

对象,执行,多个,动作,中对,  在制作PPT演示文稿中,经常会需要对一张幻灯片中的多个对象同时执行一个动作,那么怎么在PPT2007中实现这一功能呢?以下是小编为您带来的关于在PPT2007中对多个对象同时执行一个动作,希望对您有所帮助。在PPT2007…

关于php 高并发解决的一点思路

关于php 高并发解决的一点思路

高并发,思路,电脑软件,php,我的思路如下(伪代码):sql1:查询商品库存if(库存数量 > 0){//生成订单...sql2:同时库存-1}当没有并发时,上面的流程看起来是再正常不过了,假设同时两个人下单,而库存只有1个了,在sql1阶段两个人查询到的库存都是>0的,于…

Javascript调试之console对象——

Javascript调试之console对象——

调试,对象,你不知道,小技巧,电脑软件,前言写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。但是相信很多人也就只用过console.log()这一个方法,今天我们就…

Excel怎样设置输入数据自动变成数

Excel怎样设置输入数据自动变成数

输入,设置,数据,方法,数值,  在Excel编辑的时候,在添加数据后自动变成了日期,怎么修改?在Excel中,可以通过设置禁止将数据转换为日期。接下来小编举例简单的例子告诉大家Excel如何设置输入数据自动变成数字。Excel设置输入数据自动变成数值…