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重叠就会失效，要对这个动态的列单独再设置一下样式，去掉它的边框~

赞 (0)

相关推荐

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

  • javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

    从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }

  • JS 实现Table相同行的单元格自动合并示例代码

    代码如下,可直接运行: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&q

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

    用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

    先上效果图: CSS: 复制代码 代码如下: body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/selta

  • javascript table美化鼠标滑动单元格变色

    http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll

  • javascript实现的使用方向键控制光标在table单元格中切换

    javascript实现的使用方向键控制光标在table单元格中切换

    效果截图: html 代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl

  • 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'){ consol

  • js实现点击展开隐藏效果（实例代码）

    js实现点击展开隐藏效果（实例代码）

    本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件冒泡-提示框</title> </head> <style> button { width: 160px; h

  • js拖动滑块和点击水波纹效果实例代码

    拖动滑块效果: 先看看效果图: <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t

  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码

    最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

  • bootstrap table单元格新增行并编辑

    bootstrap table单元格新增行并编辑

    table单元格新增行并编辑,具体内容如下 需要 bootstrap.min.css -- [ Bootstrap ] jquery-1.8.2.min.js -- [ Jquery ] 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • layui table单元格事件修改值的方法

    事件中的 this相当于document.getElementById("id") 替代方法就是将原本 document.getElementById("id").InnerHTML = "填充代码"; 替换成 $("#id").html("填充代码"); <!DOCTYPE html> <html> <head> <meta charset="utf-8

  • Android开发实现ListView点击展开收起效果示例

    Android开发实现ListView点击展开收起效果示例

    本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的 布局文件很简单: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm

  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

随机推荐