做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 t