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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
node省市区三级数据性能测评实例分析
Nov 06 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 多个submit提交表单 处理方法
2009/07/07 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
Vue组件实现触底判断
2019/06/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python 异或加密字符串的实例
2018/10/14 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python 3 判断2个字典相同
2019/08/06 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python Gabor滤波器讲解
2020/10/26 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
JSP&Servlet技术面试题
2015/05/21 面试题
毕业生简历自我评价范文
2014/04/09 职场文书
施工协议书范本
2014/04/22 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书