Table折叠小技巧html-demo

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