jquery之表格伸缩功能（动态子表）

andyhu00

2014-05-07

关注关注

============================================================================

原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。

请注明转自：http://yunjianfei.iteye.com/blog/

============================================================================

做web设计的时候，经常会遇到父表，子表的问题，例如：班级表&学生表，集群表&主机表等等。。说白了就是数据库设计中的一对多关系的情况。

这种状况在做页面展示的时候，做成伸缩表格的样子比较灵活点。下面是我参照了一个开源的jquery插件实现的动态伸缩表格，大家可以参照一下。

首先，上效果图：

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/

table