表格折叠展开

最新推荐文章于 2024-05-04 02:42:40 发布
最新推荐文章于 2024-05-04 02:42:40 发布
阅读量167 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/haiconc/archive/2012/02/15/2353318.html

表格折叠展开其实质就是列的隐藏和显示，用JQuery很容易实现这个。

折叠展开的效果如下两图

源码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>表格列显示隐藏</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <style type="text/css">
            body{ font-size:12px;}
            .iup{ background-color:#eee;}
            #table1{ background-color:#333;}
            #table1 td{ background-color:#fff;}
        </style>

        <script type="text/javascript">
     $(document).ready(function(){
           $("#showbtn").toggle(
            function () {
                $('.iup').hide();
                $(this).val('显示');
            },
            function () {
                $('.iup').show();
                $(this).val('隐藏');
            }
        );
      })
        
      </script>
    </head>
    <body align='center'>
<center>
    <input type='button' value='隐藏' id='showbtn' />
    <br/>
                <table id='table1' cellspacing='1'>
                 <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
                  <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
                  <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
                  <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
                  <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
                  <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr> <tr>
                 <td width='150'>第一格</td>
                 <td width='250' class='iup'><input type='text'/></td>
                 <td width='150'>第三格</td>
                 </tr>
               </table>
    
      </center>  
    </body>
</html>

转载于:https://www.cnblogs.com/haiconc/archive/2012/02/15/2353318.html

javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
实现一个可无限折叠的table
weixin_34272308的博客
11-11 509
前言 如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： 其实这个项目在两个月以前就以上上传在github了，但当时没有写详细的实现过程。自己前几天发表的一篇技术贴当下拉列表数据过大时，该如何应对？得到大家的不少支持，犹如歌曲《红日》里的歌词像红日之火 点燃真的我~ 所以继续为掘金社区做奉献自己微不足道的力量啦 ~~ 在周末听着嗨歌写文还是很nice的~ 嗨...
Table折叠小技巧html-demo
weixin_33857230的博客
10-16 2115
1.要做一个table折叠的展示文本框直接上代码 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table-折叠测试&lt;/title&gt; &lt;script type="text/javascript" src="http://libs.baidu.com/jquery/2.1
可折叠的table表格
MrZive的博客
12-15 6324
公司要求把表格改为可折叠的树结构，所以临时做的一个demo，考虑到整齐的问题，所以只在第一列做了个缩进，稍有不足请见谅 jquery表格展开折叠代码 *{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;} .big_table{ border:1px soild #EBEBEB;border-collapse:colla
table行的折叠和展开
热门推荐
是一座岛
09-14 2万+
1.效果图 2.html <col style="width:100px;"> 编号 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 123 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 编号 入院时间 离院时间 在
jQuery实现表格展开与折叠的方法
10-24
在本文中，将详细介绍如何使用jQuery实现表格内容的展开与折叠功能。这一功能通过利用jQuery库中的toggleClass方法和链式操作技巧来实现，非常适合对初学者和需要为Web页面添加动态交互功能的开发人员。 ### 知识点...
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
django-foldable-admin:在Django Admin UI中折叠展开应用程序
05-12
django-foldable-admin允许折叠/扩展应用程序部分。 :skull_and_crossbones: 此项目不再受支持 :skull_and_crossbones: 要求： Django> = 1.8（自Django> = 2起未在新版本上进行测试） Python 2.7或> = 3.3...
QTableView 切换折叠展开图标
04-22
本篇我们将深入探讨如何在`QTableView`中实现切换折叠展开图标的功能，这对于处理层级结构的数据特别有用。 首先，`QTableView`本身并不直接支持折叠和展开功能，因为它是为平面表格设计的。但通过结合`...
Bootstrap框架----DataTables列表折叠列
直到世界的尽头
01-31 2万+
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例 本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。 官网例子参考 行详细内容的展开与折叠 http://datatables.club/example/user_share/row_details.h...
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
TreeTable,用于展开/折叠table的行
05-22
TreeTable,用于展开/折叠table的行:比如,类别展示
可展开列的jQuery表格插件
12-11
这是一款可展开列的jQuery表格插件。该插件首先在初始化时，所有的表格列采用简洁的显示方式，当用户点击表格列头时，该列被展开，显示详细信息。
HTML 自动伸缩的表格Table js实现
10-30
在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。
jQuery实现的表格展开伸缩效果实例
01-19
本文实例讲述了jQuery实现的表格展开伸缩效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title> <style> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left
table 折叠行的实现
dzf203的专栏
06-16 2104
最终效果如下图所示：     $(function() {         bindToggle();     });     // 点击栏目展开或折叠     function bindToggle() {         $(".checkboxedittable").toggle(         func
简单实现tableView折叠列表
u013770512的专栏
03-31 1685
折叠列表在以文字内容为主的网站上很常见，主要用于对导航连接进行分类，包含一个分段列表，每个分段下有一些子选项，可以展开各个子项，也可以关闭，现在来设计一个这样的列表，首先需要建一个View用来响应点击事件的（展开列表 关闭列表）在这个过程中表视图控制器会做两件事：1更新模型及更新数据  2更新表视图 可以把点击的分段保存下来，作为当前的展开索引 之后可以刷新列表   方法有两种：1reloadDa
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 571
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
请叫我欧皇！的博客
06-28 8615
toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（第一个参数为 true 则展开）文章到此结束，希望对你有所帮助~使用递归的方式进行展开折叠操作。
vue element表格折叠展开
最新发布
01-01
### 使用Element UI实现在Vue中的表格行折叠与展开 在 Vue 应用程序中利用 Element UI 的 `el-table` 组件来创建具有可扩展行特性的表格，可以通过配置特定属性使整个行成为触发器而不是默认仅限于右侧的小图标。为了达到这一目的，需自定义事件处理逻辑并调整样式。 对于希望点击任意位置都能触发展开/关闭操作的需求，主要依赖于监听行点击事件并通过编程方式控制对应行的状态变化。具体做法如下： #### HTML模板部分 ```html <template> <el-table :data="tableData" @row-click="handleRowClick"> <!-- 定义列 --> <el-table-column type="expand"> <template slot-scope="props"> <p>{{ props.row.description }}</p> <!-- 展示更多详情信息 --> </template> </el-table-column> <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> </el-table> </template> ``` 此段代码设置了当用户单击某一行时会调用 `handleRowClick()` 方法[^1]。 #### JavaScript方法实现 ```javascript export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', description: '描述...' }, // 更多数据项... ], expandedRows: [] // 存储当前已展开的行索引 }; }, methods: { handleRowClick(row) { const index = this.tableData.indexOf(row); if (this.expandedRows.includes(index)) { this.$refs.multipleTable.toggleRowExpansion(row, false); // 收起该行 this.expandedRows.splice(this.expandedRows.indexOf(index), 1); } else { this.$refs.multipleTable.toggleRowExpansion(row, true); // 展开该行 this.expandedRows.push(index); } } } } ``` 上述JavaScript实现了通过维护一个数组 `expandedRows` 来跟踪哪些行处于展开状态，并据此决定是应该收起还是展开指定行。 此外，还可以进一步优化用户体验，比如添加动画过渡效果、支持键盘导航等特性以增强交互性[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值