可折叠的table表格
2017-12-15 09:49
357 查看
公司要求把表格改为可折叠的树结构，所以临时做的一个demo，考虑到整齐的问题，所以只在第一列做了个缩进，稍有不足请见谅
<title>jquery表格展开折叠代码</title>
<style>
*{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;}
.big_table{ border:1px soild #EBEBEB;border-collapse:collapse;margin-top:200px;width:1400px;}
.inner_table{ border:1px soild #EBEBEB;border-collapse:collapse;width:1400px;}
td{ font:normal 12px/17px Arial;text-align:left;}
th{ font:bold 12px/17px Arial;text-align:left;border-bottom:1px solid #333;}
.big_table tr td:first-child{position:relative;}
/*.big_table tr th:first-child{width:20px;}*/
.some{ background:#EEEEEE;}
.odd{ background:#FFFFEE;}
.selected{ background:#FF6500;color:#fff;}
button {position: absolute;top:0px;cursor: pointer; width: 20px; height: 15px;text-indent: 100%;overflow: hidden; border: 0; background: transparent;text-align: center;}
button:before { content: '+'; display: block; width: 100%; text-align: center; text-indent: 0; }
button[state=close]:before { content: '-'; }
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// $('.big_table').children("tr:ood").css('background','red');
// $('.big_table tr').eq(0).siblings().find(":odd").css('background','green');
$('button').click(function(){ // 获取所谓的父行
var $this = $(this).parents("tr");
if($(this).attr("state")=="close"){
$(this).attr("state","open");
}else if($(this).attr("state")=="open"){
$(this).attr("state","close");
}
var name = $this.attr("class");
var tr_id = $this.attr("tr_id");
$this.nextAll("tr[tr_id=table_"+tr_id+"]").toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</head>
<body>
<div style="width:1400px;margin:0 auto;">
<table class="big_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<thead>
<tr><th sytle="width:20px;"></th><th sytle="width:50px;">id</th><th sytle="width:60px;">名称</th><th>父级id</th><th>父级信息</th><th>层次级数</th><th>排列顺序</th><th>删除标志</th><th>是应用</th><th>需要权限</th><th>可用</th><th>isSys</th><th>目录路径</th><th>应用模板</th><th>模板名称</th><th>js文件</th></tr>
</thead>
<tbody>
<tr class="some" tr_id="1"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_1"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr class="some" tr_id="1_1"><td><button style="left:15px;" state="close">content</button></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_1_1"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr tr_id="1_1"><td></td><td> 1_1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="1_2"><td></td><td> 1_2</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
<tr tr_id="1_1"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="1_2"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
<tr class="some" tr_id="2"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0<
4000
;/td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_2"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr tr_id="2_1"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="2_2"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<title>jquery表格展开折叠代码</title>
<style>
*{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;}
.big_table{ border:1px soild #EBEBEB;border-collapse:collapse;margin-top:200px;width:1400px;}
.inner_table{ border:1px soild #EBEBEB;border-collapse:collapse;width:1400px;}
td{ font:normal 12px/17px Arial;text-align:left;}
th{ font:bold 12px/17px Arial;text-align:left;border-bottom:1px solid #333;}
.big_table tr td:first-child{position:relative;}
/*.big_table tr th:first-child{width:20px;}*/
.some{ background:#EEEEEE;}
.odd{ background:#FFFFEE;}
.selected{ background:#FF6500;color:#fff;}
button {position: absolute;top:0px;cursor: pointer; width: 20px; height: 15px;text-indent: 100%;overflow: hidden; border: 0; background: transparent;text-align: center;}
button:before { content: '+'; display: block; width: 100%; text-align: center; text-indent: 0; }
button[state=close]:before { content: '-'; }
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// $('.big_table').children("tr:ood").css('background','red');
// $('.big_table tr').eq(0).siblings().find(":odd").css('background','green');
$('button').click(function(){ // 获取所谓的父行
var $this = $(this).parents("tr");
if($(this).attr("state")=="close"){
$(this).attr("state","open");
}else if($(this).attr("state")=="open"){
$(this).attr("state","close");
}
var name = $this.attr("class");
var tr_id = $this.attr("tr_id");
$this.nextAll("tr[tr_id=table_"+tr_id+"]").toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</head>
<body>
<div style="width:1400px;margin:0 auto;">
<table class="big_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<thead>
<tr><th sytle="width:20px;"></th><th sytle="width:50px;">id</th><th sytle="width:60px;">名称</th><th>父级id</th><th>父级信息</th><th>层次级数</th><th>排列顺序</th><th>删除标志</th><th>是应用</th><th>需要权限</th><th>可用</th><th>isSys</th><th>目录路径</th><th>应用模板</th><th>模板名称</th><th>js文件</th></tr>
</thead>
<tbody>
<tr class="some" tr_id="1"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_1"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr class="some" tr_id="1_1"><td><button style="left:15px;" state="close">content</button></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_1_1"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr tr_id="1_1"><td></td><td> 1_1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="1_2"><td></td><td> 1_2</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
<tr tr_id="1_1"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="1_2"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
<tr class="some" tr_id="2"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0<
4000
;/td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="table_2"><td colspan="16">
<table class="inner_table">
<colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup>
<tbody>
<tr tr_id="2_1"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
<tr tr_id="2_2"><td></td><td> 1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr>
</tbody></table>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表格组件神器：bootstrap table详细使用指南
- js操作table元素实现表格行列新增、删除技巧总结
- 关于Bootstrap Table使用生成冻结窗格的表格
- JS实现table表格固定表头且表头随横向滚动而滚动
- vue2.0的Element UI的表格table列时间戳格式化
- Android TableLayout表格布局详解
- 普通table表格样式大全
- table固定头部，表格tbody可上下左右滑动
- 如何写table才能使此表格在WEB打印时，表格的边框线是细线
- jquery获取表格table中某行某列的值
- 超强漂亮表格TinyTable
- selenium处理table表格
- javascript将table的td变为可编辑的input，实现表格动态编辑
- Android------>TableLayout表格布局方式
- Javascript操作table,tr,td和表格CSS样式设置小常识
- 一天搞定CSS：表格（table）--19
- jQuery实现table表格隔行换色鼠标经过变色
- HTML中遍历Table表格中的Checkbox
- 在TableViewer中如何给表格的单元格增加其他组件的编辑功能
- [转]table表格的常用功能