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