============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
做web设计的时候,经常会遇到父表,子表的问题,例如:班级表&学生表, 集群表&主机表等等。。说白了就是数据库设计中的一对多关系的情况。
这种状况在做页面展示的时候,做成伸缩表格的样子比较灵活点。下面是我参照了一个开源的jquery插件实现的动态伸缩表格,大家可以参照一下。
首先,上效果图:
比较简陋,只用了最简单的css效果,下面贴出我的代码。
1. 文件名:test.css
table.expanding { margin-top:2px; margin-left:20px; #background-color: #FFF; #background:#EEF4F9; #border: none; border: 1; #color:#003755; border-collapse:collapse; font: 14px "宋体"; } table.expanding th{ background:#7CB8E2; color:#fff; padding:8px 10px; text-align:center; } table.expanding tr.odd td{ background:#C7DDEE none repeat-x scroll center left; color:#000; padding:4px 2px; } table.expanding a{ text-decoration:none; height:1em; } table.expanding a:link, table.expanding a:visited{ color:#3366CC; } table.expanding a:hover{ /* 鼠标经过时 */ color:#B50000; text-decoration:underline; }
2. test_table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="./test.css"/> <script src="./jquery-2.1.0.min.js"></script> <script type="text/javascript"> function submit_put() { var a = confirm('是否变更状态?'); if (a == true) { return true; } else{ return false; } } function submit_del() { var a = confirm('是否删除该计算池?'); if (a == true) { return true; } else{ return false; } } </script> <script> $.fn.extend({ show_pool_items: function(pool_id) { var resp = { "response_code" : 1, "pool_run": { "total" : 10, "on_line" : 5, }, "pool_detail":[{ "hostname" : "host1", "worker_num" : 5, "on_line" : 3}, { "hostname" : "host2", "worker_num" : 5, "on_line" : 2, } ], }; //以上为模拟数据,可以通过下面的ajax方式获取json数据。 //$.getJSON("/pool" +pool_id, function(resp){ var html = "" if (resp.response_code == 0) { html = "<font align=center>无记录!</font>"; } else { var run = resp.pool_run var detail = resp.pool_detail html += "<div id='run_"+ pool_id +"'> <font> 总数:"+ run.total + " 在线:"+ run.on_line + "</font> </div>"; html += "<table border=1 class=t1 id='Child_'+pool_id >"; html += "<tr align=center><th>主机名</th> <th>Worker数</th> <th>在线Worker</th> </tr>"; for(var i=0; i < detail.length; i++) { html += "<tr align=center> <td>"+detail[i].hostname+"</td> <td>" + detail[i].worker_num html += "</td> <td>" + detail[i].on_line+"</td>"; html += "</tr>" } html += "</table>"; html += "<br>"; } $("#div_"+pool_id).empty(); $("#div_"+pool_id).html(function(i,origText){ return html; }); //}); } }); $(document).ready(function(){ $(".expanding tr:odd").css("cursor","pointer"); $(".expanding tr:odd").addClass("odd"); //$(".expanding tr:odd td").not(".cls").attr("title","点击这里展开/关闭"); $(".expanding tr:odd").attr("title","点击这里展开/关闭"); $(".expanding tr:not(.odd)").hide(); $(".expanding tr:first-child").show(); $(".expanding tr.odd td").click(function(e){ var tag = e.target.nodeName; //if($(this).attr("class") == 'cli'){ if(tag == 'A' || tag == 'a'){ } else{ if($(this).parent().next("tr").is(":hidden")){ var pool_id =$(this).parent().attr("id"); $(this).show_pool_items(pool_id); } $(this).parent().next("tr").toggle(); } }); }); </script> </head> <body> <center> <hr> <table border="1" class="expanding"> <tr><th>PoolID</th><th>计算池名称</th><th>状态</th><th>创建时间</th><th>备注</th><th>状态变更</th><th>删除</th></tr> <tr id='1' ><td>1</td> <td>test</td> <td>hello</td><td>2013-1-10</td> <td>test </td> <td class="cli"><a href="#" onclick="return submit_put()">停用</a> </td> <td class="cli"> <a href="#" onclick="return submit_del()">删除</a></td> </tr> <tr> <td colspan="7" align="center" background=""> <div id="div_1"> </div> </td> </tr> <tr id='2' ><td>1</td> <td>test</td> <td>hello</td><td>2013-1-10</td> <td>test </td> <td class="cli"><a href="#" onclick="return submit_put()">停用</a> </td> <td class="cli"> <a href="#" onclick="return submit_del()">删除</a></td> </tr> <tr> <td colspan="7" align="center" background=""> <div id="div_2"> </div> </td> </tr> </table> <br> </center> </body> </html>
附上开源插件链接:http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/
相关推荐
基于jQuery可以伸缩的表格基于jQuery可以伸缩的表格
jquery插件colResizable实现表格列可拖拽伸缩表格大小
jquery 伸缩表格 单击每个单元格最后一行实现伸缩 代码还不够精简 只供大家参考
NULL 博文链接:https://bestwinner.iteye.com/blog/694297
主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
jq弹性表格控件,自动伸缩,随表格数量动态变化 jquery插件类 tilesjs
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
很实用的动态改变表格列宽,就像Excel一样,可以自由伸缩
09-动态创建表格 10-购物车增减删案例 11-按键控制div运动 12-文本收缩展开案例 13-多个位置缓动动画 14-返回顶部 15-侧边伸缩框 16-面向对象-Tab栏案例 17-密码设置显示隐藏以及安全等级 18-利用js实现数组去重的10...