jquery之表格伸縮功能（動態子表）

做web設計的時候，經常會遇到父表，子表的問題，例如：班級表&學生表， 叢集表&主機表等等。。說白了就是資料庫設計中的一對多關聯性的情況。

這種狀況在做頁面展示的時候，做成伸縮表格的樣子比較靈活點。下面是我參照了一個開源的jquery外掛程式實現的動態伸縮表格，大家可以參照一下。

首先，上：

比較簡陋，只用了最簡單的css效果，下面貼出My Code。

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

    無標題文檔    <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 = "無記錄！";        } else {          var run = resp.pool_run          var detail = resp.pool_detail            html += "  總數:"+ run.total + "   線上:"+ run.on_line + " ";          html += "
 
  ";          html += "
  "; for(var i=0; i < detail.length; i++) { html += "
   "; html += "
   " } html += "
  

   

    
主機名稱
 
    
Worker數
 
    
線上Worker
 
   
 
    
"+detail[i].hostname+"
 
    
" + detail[i].worker_num html += "
 
    
" + detail[i].on_line+"
 
";          html += "
";        }        $("#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>           
 
      
  

   

    
PoolID
    
計算池名稱
    
狀態
    
建立時間
    
備忘
    
狀態變更
    
刪除
   
 
   

    
1
 
    
test
 
    
hello
    
2013-1-10
 
    
test 
 
    
停用 
 
    
 刪除
 
   
 
   
 
    
 
 
   
 
   

    
1
 
    
test
 
    
hello
    
2013-1-10
 
    
test 
 
    
停用 
 
    
 刪除
 
   
 
   
 
    
 
 
   
 
  
 
    
  

附上開源外掛程式連結：http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/