Table折叠小技巧html-demo

最新推荐文章于 2023-06-29 11:12:50 发布
最新推荐文章于 2023-06-29 11:12:50 发布
阅读量2k 收藏 3
点赞数
文章标签： javascript 人工智能 python ViewUI

1.要做一个table折叠的展示文本框直接上代码

html:

<!DOCTYPE html>
<html>
<head>
    <title>table-折叠测试</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
            //展开表格
            $("#foldtable").click(function() {
                var txt = $(this).text();
                if(txt == "展开") {
                    $(this).text("收起");
                    $(".m-table1").find(".hidetable").css("display", "table-row");
                } else {
                    $(this).text("展开");
                    $(".m-table1").find(".hidetable").css("display", "none");
                }
            })
        });
        
    </script>
</head>
<body>
<!--伸缩表格-->
                <div id="div_sxjbxx" class="m-table1">
                    <table>
                        <colgroup>
                            <col width="110" />
                            <col width="" />
                            <col width="110" />
                            <col width="560" />
                        </colgroup>
                        <tr>
                            <th>事项编号</th>
                            <td><span id="sxjbxx_num"></span></td>
                            <th>事项名称</th>
                            <td><span id="sxjbxx_name"></span>  </td>
                        </tr>
                        <tr>
                            <th>申请主体</th>
                            <td><span id="sxjbxx_sqrztlx"></span></td>
                            <th>实施主体性质</th>
                            <td><span id="ssztxz"></span></td>
                        </tr>
                        <tr>
                            <th>承诺时限</th>
                            <td><span style="line-height: 30px;" id="sxjbxx_cnqx"></span></td>
                            <th>法定时限</th>
                            <td><span style="line-height: 30px;" id="sxjbxx_legal"></span></td>
                        </tr>
                        <tr>
                            <th>办件类型</th>
                            <td><span id="sxjbxx_dealtype"></span></td>
                            <th>事项类型</th>
                            <td><span id="sxjbxx_nature"></span></td>
                        </tr>
                        <tr class="hidetable">
                            <th>联办机构</th>
                            <td><span id="lbjg"></span></td>
                            <th>通办范围</th>
                            <td><span id="tbfw"></span></td>
                        </tr>
                        <tr class="hidetable">
                            <th>运行系统</th>
                            <td><span id="yxxt">省级</span></td>
                            <th>行使层级</th>
                            <td><span id="xscj"></span></td>
                        </tr>
                        
                        <tr class="hidetable">
                            <th>权限划分</th>
                            <td><span id="cxff"></span></td>
                            <th>行使内容</th>
                            <td><span id="xsnr"></span></td>
                        </tr>
                        <tr class="hidetable">
                            <th>网上支付</th>
                            <td><span id="wszf"></span></td>
                            <th>预约办理</th>
                            <td><span id="yybl"></span></td>
                        </tr>
                        <tr class="hidetable">
                            <th>办理形式</th>
                            <td><span id="blxs"></span></td>
                            <th>物流快递</th>
                            <td><span id="wlkd"></span></td>
                        </tr>
                        <tr class="hidetable">
                            <th>是否收费</th>
                            <td><span id="sxjbxx_ischarge"></span></td>
                            <th>数量限制</th>
                            <td><span id="slxz"></span> </td>
                        </tr>
                        <tr class="hidetable">
                            
                            <th>办理结果</th>
                            <td id="jg_list" colspan="3"> </td>
                        </tr>
                    </table>
                    <div class="f-tac mg-t2 mg-b2">
                        <div id="foldtable" class="foldbtn">展开</div>
                    </div>
                </div>
                <!--伸缩表格结束-->
</body>
</html>

 

点击然后table就能进行伸缩了

 

weixin_33857230
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
b-table-and-b-modal-bootstrap-vue-demo-table:Bootstrap-Vue-Demo
05-13
在本项目"B-table-and-b-modal-bootstrap-vue-demo-table"中，我们主要关注的是Bootstrap Vue库的应用，这是一个基于Vue.js的组件库，它扩展了Bootstrap框架的功能，为开发Vue应用程序提供了丰富的交互式组件。...
bootstrap-table-demo
03-25
这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例代码和资源，帮助开发者快速理解和应用Bootstrap Table。 1. **基本用法**：Bootstrap Table 的使用通常涉及在HTML中定义一个表格结构，然后...
html table表格内容折叠,javascript表格内容的展开和折叠
weixin_30682487的博客
05-31 1579
表格内容的展开和折叠h2,h5,#tooltipMsg,p {white-space: nowrap;}td {border: 1px solid #ccc;height: 50px;text-align: center;font-size: 10pt;padding: 2px;}12window.onload=function(){var tableOutIn=function(e,type){...
html table表格内容折叠,table_标签 | Elements_HTML_参考手册_非常教程
weixin_39613744的博客
05-31 720
tableHTML 元素表示表格数据-即，通过两维数据表表示的信息。内容类别流量内容允许的内容按以下顺序：可选的元素，零个或多个元素，可选的元素，可以是以下任一元素：零个或多个元素一个或多个元素可选元素标记遗漏没有，起始和结束标签都是强制性的。允许父母任何接受流内容的元素允许ARIA角色任何DOM界面HTMLTableElement一个可选元素，零个或多个元素，一个可选元素，以下任何一项： 零...
实现一个可无限折叠的table
weixin_34272308的博客
11-11 451
前言 如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： 其实这个项目在两个月以前就以上上传在github了，但当时没有写详细的实现过程。自己前几天发表的一篇技术贴当下拉列表数据过大时，该如何应对？得到大家的不少支持，犹如歌曲《红日》里的歌词像红日之火 点燃真的我~ 所以继续为掘金社区做奉献自己微不足道的力量啦 ~~ 在周末听着嗨歌写文还是很nice的~ 嗨...
table行的折叠和展开
热门推荐
是一座岛
09-14 2万+
1.效果图 2.html <col style="width:100px;"> 编号 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 123 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 编号 入院时间 离院时间 在
vue使用Element的el-table实现表格嵌套及表格内容的折叠效果
weixin_42841605的博客
06-29 1万+
vue+element，使用el-table实现表格嵌套及表格内容的折叠收起效果
TabletUI-Demo-WOPR
06-03
TabletUI 演示 WOPR 我本地的 FHEM Tablet UI 安装作为演示。 安装在 Fhem 之外的带有 PHP 的 Apache Web 服务器中。 HTML 代码完全由 PHP 脚本生成。 php目录包含未更改的 PHP 代码。 html目录包含从中生成的 HTML ...
html-demo:html-demo
03-12
在本项目"html-demo:html-demo"中，我们可以深入学习HTML的基础知识以及实际应用。 HTML文档由一系列元素组成，这些元素通过标签表示，如`<html>`, `<head>`, `<body>`等。`<html>`元素是整个文档的根元素，包含...
flask-admin-tree-table-demo:flask-admin 树状表格示例
05-03
cd flask-admin-tree-table-demo pipenv install pipenv shell python app.py 启动后访问： 效果图 主要依赖 jquery-treegrid.js: 用于显示树状表格 sqlalchemy-mptt: 配置数据模型为“左右值树”数据结构 说明 本...
TreeTable,用于展开/折叠table的行
05-22
TreeTable,用于展开/折叠table的行:比如,类别展示
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
table做网页html
01-02
漂亮的表格网页
java-javafx-table-custom-sorting-demo
05-01
本项目“java-javafx-table-custom-sorting-demo”专注于演示如何在JavaFX的表格控件中实现自定义排序功能，这在处理复杂数据模型时尤其有用。自定义排序允许开发人员根据特定的需求或业务逻辑来调整默认的排序行为...
bootstrap-table-demo-
05-17
这个"bootstrap-table-demo"压缩包文件很可能包含了一个示例项目，用于演示如何在实际应用中使用Bootstrap Table组件。 Bootstrap Table的核心特性包括： 1. **分页**：Bootstrap Table 支持对大量数据进行分页...
html折叠表格,CSS 表格
weixin_39673002的博客
05-31 463
HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。表格边框我们可以使用border属性为表，表行和表单元格添加边框。table,th,td{border:1pxsolidblack;}html>table,th,td{border:1pxsolidblack;}ValueItemCSSS...
table 折叠行的实现
dzf203的专栏
06-16 2004
最终效果如下图所示：     $(function() {         bindToggle();     });     // 点击栏目展开或折叠     function bindToggle() {         $(".checkboxedittable").toggle(         func
Vue el-table 组件通过按钮实现折叠行（底部有手搓table折叠行代码）
weixin_65084919的博客
03-10 979
实现展开和关闭列
el-table折叠
最新发布
10-13
<el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> ``` 最后，在表格的行展开和收起时，需要更新 expandRowKeys 数组的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值