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就能进行伸缩了

Table折叠小技巧html-demo的更多相关文章

  1. FineUI小技巧（7）多表头表格导出

    前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述.今天我们要更进一步,介绍下如何导出多表头表格. 多表头表格的标签定义 在 ...

  2. PHP 小技巧之__callStatic魔术方法使用

    使用 PHP 框架时,经常会用到 ORM 模型查询数据库,有没有疑问:为啥有些 ORM 中的静态查询方法,不能通过函数追踪下去呢,很有可能就是使用了 __callStatic 魔术方法的小技巧 这里贴 ...

  3. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  5. iOS：小技巧（不断更新）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  6. 最强 Android Studio 使用小技巧和快捷键

    写在前面 本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android Studio 使用小技巧和快捷键. 根据这些小技巧的使用场景,本 ...

  7. Windows Azure一些小技巧集合

    我最近做了一个Windows Azure上面的项目,自己在做的过程中遇到了很多问题.有的是我自己摸索解决,有的是到网上寻找零碎的信息结合起来解决的.我感觉应当把某些解决方法集中一下,方便我以后查阅,也 ...

  8. FineUI小技巧（5）向子窗口传值，向父窗口传值

    前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...

  9. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

随机推荐

  1. JAVA card 应用开发（二） 在项目添加APPLET

    在上篇博文中.<JAVA card 应用开发创建第一个APPLET>.介绍了一个项目从无到有. 那么.我们建立了这个项目后,仅仅有一个应用(一个可选AID),假设我希望这个项目能够有多个应 ...

  2. SSD阵列卡方案优化：考虑使用RAID 50替代RAID 10

    最近一直在研究RAID 50,因为牺牲一半的容量的RAID 10代价实在太大了,而且它提供的可用性也并不是百分百的,我们首先来看下RAID 10的可用性分析: 以同等容量的不同RAID方式作为案例分析 ...

  3. android之lint警告This Handler class should be static or leaks might occur

    更新到adt2.0的开发者们可能会在handler上发现这么一条警告:This Handler class should be static or leaks might occur . 首先在ADT ...

  4. [Nginx] Nginx 配置location总结

    cp from : https://www.cnblogs.com/coder-yoyo/p/6346595.html location匹配顺序 "="前缀指令匹配,如果匹配成功, ...

  5. [转]Apache 配置虚拟主机三种方式

    转自: http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假设服务器有个IP地址为192.168. ...

  6. iOS：移动端“用户反馈和客服”的几个平台SDK的介绍

    简单阐述: 用户反馈功能几乎是每个app都有的一个功能点,通过反馈功能实现与用户的连接.沟通,随时随地收集用户意见反馈和Bug报告,即时和用户保持沟通,在一定程度上提升了app的竞争力.而给app评分 ...

  7. K3 LEDE固件更改FRP客户端版本

    1.下载文件 /usr/bin/wget --no-check-certificate https://github.com/fatedier/frp/releases/download/v0.23. ...

  8. C#中的HashSet， HashTable， Dictionary的区别【转】

    HashSet和Python中的Set差不多,都是为逻辑运算准备的,HashSet不允许数据有重复,且存入的时单值不是键值对. HashTable和Dictionary差不多,但是他们的实现方式时不同 ...

  9. 热修复 DexPosed AOP Xposed MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. MYSQL数据删除数据，物理空间没释放

    当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删除操作后在数据文件中留下碎片所致.OPTIMIZE TABLE 是指对表进行优化.如果已经删除了表的一大部分数据,或者如果已 ...