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

Table折叠小技巧html-demo相关推荐

朋友圈内容防折叠不折叠小技巧
朋友圈是重要的价值输出阵地,如何具体运营朋友圈输出价值,增加用户粘性.我们在上篇文章已经讲过朋友圈的运营策略,今天分析一下朋友圈内容防折叠的原因及有效办法. 一.如何有效避免被折叠做运营,每天避免不 ...
小技巧！微信发朋友圈长文字怎样才能避免被折叠成一行？
各位小伙伴们,晚上好!好长一段时间没有分享了,今天我们分享一个微信小技巧,关于微信朋友圈发布长段文字时怎么才能避免被折叠成一行? 我们工作生活中,发布朋友圈的时候可能会遇到内容被折叠成为一行,使得效果 ...
idea（水槽）代码左边栏显示代码行数、方法运行图标、折叠代码块，代码块缩进提示线，idea小技巧
找了很久才发现的.没问别摸索出来的,搜索不到帖子就自己写一个了. 单独方法块运行挺好用的. 1:代码块折叠:Idea小技巧之折叠代码块_我是一个小石头的博客-CSDN博客 2:代码行数显示: 显示 ...
小技巧--table表格td内容垂直居中方法
小技巧–table表格td内容垂直居中方法前端页面编写时,table表格排版时最容易遇到的,就是单元格内的内容无法居中,又不能写行高时,可以使用以下方法: table td {vertical-al ...
html table边框细线,HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...
php中设置table表格边框大小,有关HTML表格边框的设置小技巧
下面小编就为大家带来一篇有关HTML表格边框的设置小技巧.小编觉得挺不错的,现在分享给大家,也给大家做个参考对于很多初学HTML的人来说,表格一般我们用表格的时候总会给它个border属性,比如: ...
iOS必备小技巧（非常的全）
IOS必备小技巧退回输入键盘 - (BOOL)textFieldShouldReturn:(id)textField{ [textField resignFirstResponder]; ...
pycharm 查看代码行数_【收藏】提高PyCharm效率的10个小技巧
PyCharm是最常用的python开发IDE,程序员可以通过PyCharm强大的功能节约大量时间用来摸鱼工作,提高生产效率. 阿狗总结了10个自己会用到的PyCharm中可以提高撸码效率的小技巧 ...
细说接口性能优化的11个小技巧
前言接口性能优化对于从事后端开发的同学来说,肯定再熟悉不过了,因为它是一个跟开发语言无关的公共问题. 该问题说简单也简单,说复杂也复杂. 有时候,只需加个索引就能解决问题. 有时候,需要做代码重构. ...

Table折叠小技巧html-demo

Table折叠小技巧html-demo相关推荐

最新文章

热门文章