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


Posted in Javascript onApril 10, 2017

如果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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
js实现适配不同的屏幕大小
Apr 10 #Javascript
JS闭包可被利用的常见场景小结
Apr 09 #Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
作为老司机使用 React 总结的 11 个经验教训
Apr 08 #Javascript
详解angular element()方法使用
Apr 08 #Javascript
angularjs的select使用及默认选中设置
Apr 08 #Javascript
JS排序之冒泡排序详解
Apr 08 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
PHP文件与目录操作示例
2016/12/24 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
使用tensorflow实现线性svm
2018/09/07 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python内存管理机制原理详解
2019/08/12 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
运动会入场解说词300字
2014/01/25 职场文书
端午节活动策划方案
2014/03/09 职场文书
工地安全标语
2014/06/07 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
校庆标语集锦
2014/06/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
答谢酒会主持词
2015/07/02 职场文书
董事长秘书工作总结
2015/08/14 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏