Jquery table Scaling (dynamic sub-table)

During web design, the parent table and sub-Table problems are often encountered, such as class table and student table, cluster Table, and host table .. To put it bluntly, it is the one-to-many relationship in the database design.

In this case, it is more flexible to make a scaling table when presenting the page. The following is a Dynamic Scaling table based on an open-source jquery plug-in.

First, go:

Simple, with only the simplest css effect, I will post my code below.

1. File Name: 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 {/* When the mouse passes */color: # B50000; text-decoration: underline ;}

2. test_table.html

  
   Untitled document  
 <Script src = "./jquery-2.1.0.min.js"> </script> <script type = "text/javascript"> function submit_put () {var a = confirm ('Do you want to change the status? '); If (a = true) {return true;} else {return false;} function submit_del () {var a = confirm (' Do you want to delete the computing pool? '); 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,}],}; // The preceding figure shows the simulated data. You can use the following ajax method to obtain json data. // $. GetJSON ("/pool" + pool_id, function (resp) {var html = "" if (resp. response_code = 0) {html = "no record! ";} Else {var run = resp. pool_run var detail = resp. pool_detail html + = "Total:" + run. total + "online:" + run. on_line + ""; html + ="
 
 
  
  
"; Html + ="
  
  "; For (var I = 0; I <detail. length; I ++) {html + =" 
   "; Html + =" 
   "} Html + =" 
  
 
   
 
    
Host Name
 
    
Number of workers
 
    
Online Worker
 
   
 
    
"+ Detail [I]. hostname +"
 
    
"+ Detail [I]. worker_num html + ="
 
    
"+ Detail [I]. on_line +"
 
 
"; Html + ="
";}$ (" # Div _ "+ pool_id ). empty (); $ ("# div _" +pool_id1_.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", "Click here to expand/Close"); $ (". expanding tr: odd "). attr ("title", "Click here to expand/Close"); $ (". expanding tr: not (. odd )"). hide (); $ (". expanding tr: first-child "). show (); $ (". expanding tr. odd td "). click (function (e) {var tag = e.tar get. 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
 
    
Computing pool name
 
    
Status
 
    
Creation Time
 
    
Remarks
 
    
Status Change
 
    
Delete
 
   
 
   
 
    
1
 
    
Test
 
    
Hello
 
    
 
    
Test
 
    
Disable
 
    
Delete
 
   
 
   
 
    
 
 
   
 
   
 
    
1
 
    
Test
 
    
Hello
 
    
 
    
Test
 
    
Disable
 
    
Delete
 
   
 
   
 
    
 
 
   
 
  
  
 
    
  
  
 

Link to the Open Source Plug-In: http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/