Table折叠⼩技巧html-demo 1.要做⼀个table折叠的展⽰⽂本框直接上代码
html:
<!DOCTYPE html>
<html>
<head>
<title>table-折叠测试</title>
<script type="text/javascript" src="libs.baidu/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");
}
})
html网页设计 table });
</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 id="sxjbxx_cnqx"></span></td>
<th>法定时限</th>
<td><span 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就能进⾏伸缩了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。