Dynamiczny & Complex rowspan w tabeli HTML

Question

Link to JSFiddle

Oto moja formacie JSON

{ 
    "result": { 
     "buildname1": [{ 
      "table1": ["xxx","yyy"] 
     }, { 
      "table2": ["xxx","yyy"] 
     }, { 
      "table3": ["xxx","yyy"] 
     }], 
     "buildname2": [{ 
      "table1": ["xxx","yyy"] 
     }, { 
      "table2": ["xxx","yyy"] 
     }, { 
      "table3": ["xxx","yyy"] 
     }] 
    }, 
    "Build sets": "yyy", 
    "destinationPath": "xxx", 
    "status": 1 
} 

Jest to funkcja, która używam do dynamicznego tworzenia tabeli.

function generateTable(data){ //data is the parsed JSON Object from an ajax request 
    $("#test-table tbody").empty();//Empty the table first 
    if(data.result != null){ 
     $.each(data.result,function(key,value){ 
      var buildName ="<tr><td rowspan='"+value.length+"'>"+key+"<span class='cyan darken-1 white-text badge'>"+value.length+" base tables</span></td>"; 
      var baseTable =""; 
      for(i=0;i<value.length;i++){ 
       if(i == 0){ 
        for(var k in value[0]){ 
         baseTable ="<td rowspan='"+value[0][k].length+"'>"+k+"</td></tr>"; 
        } 
       } 
       else{ 
        for(var key in value[i]){ 
         baseTable = baseTable + "<tr><td rowspan='"+value[i][key].length+"'>"+key+"</td></tr>"; 
        } 
       } 
      } 
      $("#test-table").append(buildName + baseTable); 
     }); 
    } 
} 

Oto co próbuję osiągnąć

HTML

<table id="test-table" class="bordered responsive-table"> 
    <thead> 
    <tr> 
     <th>Build Name</th><th>Base Table</th><th>Query List</th> 
    </tr> 
    </thead> 
</table> 

Pytanie:

pomyślnie utworzone dwie pierwsze kolumny (choć nieco brzydki, pomyślałem, że mogę go później poprawić), utknąłem w trzeciej kolumnie. Wysłany przeze mnie kod poprawnie tworzy dwie pierwsze kolumny, ale wydaje mi się, że logika podziału wierszy w obszarze wierszy (trzecia kolumna) wydaje mi się nieunikniona. Proszę, prowadź mnie.

Answer 1

Szczerze mówiąc nigdy wcześniej nie używałam rowspan, ale po przeczytaniu this stack answer zrozumiałam o wiele lepiej - gorąco poleciłbym zrobić to samo. Później chodziło tylko o ustalenie kolejności elementów od JSON-a do DOM.

Oto DEMO PRACY:

var data = '{"result":{"buildname1":[{"table1":["xxx","yyy", "zzz"]},{"table2":["xxx","yyy"]}],"buildname2":[{"table1":["xxx","yyy", "zzz"]},{"table2":["xxx","yyy"]},{"table3":["xxx","yyy"]}]},"Build sets":"yyy","destinationPath":"xxx","status":1}'; 
 

 
function generateTable(data) { //data is the parsed JSON Object from an ajax request 
 
    data = JSON.parse(data); 
 
    $("#test-table tbody").empty(); //Empty the table first 
 
    $.each(data.result, function(key, elem) { 
 
    var baseHtml = ""; 
 
    var childrenHtml = ""; 
 
    var maxRowSpan = 0; 
 
    $.each(elem, function(index, inner_elem) { 
 
     var innerElemKey = Object.keys(inner_elem)[0]; 
 
     var arr = inner_elem[innerElemKey]; 
 
     var elemRowSpan = arr.length; 
 
     maxRowSpan += arr.length; 
 

 
     if (index === 0) { 
 
     childrenHtml += ('<td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>'); 
 
     $.each(arr, function(indx, child) { 
 
      if (indx === 0) { 
 
      childrenHtml += ('<td rowspan="1">' + child + '</td>' + '</tr>'); 
 
      } else { 
 
      childrenHtml += ('<tr><td rowspan="1">' + child + '</td>' + '</tr>'); 
 
      } 
 
     }); 
 
     } else { 
 
     childrenHtml += ('<tr><td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>'); 
 
     $.each(arr, function(indx, child) { 
 
      if (indx === 0) { 
 
      childrenHtml += ('<td rowspan="1">' + child + '</td>' + '</tr>'); 
 
      } else { 
 
      childrenHtml += ('<tr><td rowspan="1">' + child + '</td>' + '</tr>'); 
 
      } 
 
     }); 
 
     } 
 
    }); 
 
    baseHtml += ('<tr><td rowspan="' + maxRowSpan + '">' + key + '</td>'); 
 
    $("#test-table").append(baseHtml + childrenHtml); 
 
    }); 
 
} 
 

 
$(function() { 
 
    generateTable(data); 
 
});

td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="test-table" class="bordered responsive-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Build Name</th> 
 
     <th>Base Table</th> 
 
     <th>Query List</th> 
 
    </tr> 
 
    </thead> 
 
</table>

Static HTML

<table id="test-table" class="bordered responsive-table"> 
    <thead> 
    <tr> 
     <th>Build Name</th><th>Base Table</th><th>Query List</th> 
    </tr> 
    </thead> 
</table> 

Generated HTML

<table id="test-table" class="bordered responsive-table"> 
    <thead> 
    <tr> 
     <th>Build Name</th> 
     <th>Base Table</th> 
     <th>Query List</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td rowspan="5">buildname1</td> 
     <td rowspan="3">table1</td> 
     <td rowspan="1">xxx</td> 
    </tr> 
    <tr> 
     <td rowspan="1">yyy</td> 
    </tr> 
    <tr> 
     <td rowspan="1">zzz</td> 
    </tr> 
    <tr> 
     <td rowspan="2">table2</td> 
     <td rowspan="1">xxx</td> 
    </tr> 
    <tr> 
     <td rowspan="1">yyy</td> 
    </tr> 
    <tr> 
     <td rowspan="7">buildname2</td> 
     <td rowspan="3">table1</td> 
     <td rowspan="1">xxx</td> 
    </tr> 
    <tr> 
     <td rowspan="1">yyy</td> 
    </tr> 
    <tr> 
     <td rowspan="1">zzz</td> 
    </tr> 
    <tr> 
     <td rowspan="2">table2</td> 
     <td rowspan="1">xxx</td> 
    </tr> 
    <tr> 
     <td rowspan="1">yyy</td> 
    </tr> 
    <tr> 
     <td rowspan="2">table3</td> 
     <td rowspan="1">xxx</td> 
    </tr> 
    <tr> 
     <td rowspan="1">yyy</td> 
    </tr> 
    </tbody> 
</table>