Dynamic & Complex rowspan in HTML-Tabelle

Question

Link to JSFiddle

Hier ist meine JSON-Format

{ 
    "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 
} 

Dies ist die Funktion, die ich verwende, um dynamisch die Tabelle zu erstellen.

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); 
     }); 
    } 
} 

Hier ist, was ich

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> 

Frage zu erreichen versuchen:

Ich habe erfolgreich die ersten beiden Spalten (wenn auch etwas hässlich, dachte ich kann es später verfeinern), ich stecke bei der dritten Spalte fest. Der Code, den ich gepostet habe, erzeugt die ersten beiden Spalten korrekt, aber die Logik für die rowspan innerhalb der rowspan (dritte Spalte) scheint mir zu entgehen. Bitte führen Sie mich.

Answer 1

Ich hatte ehrlich gesagt nie rowspan vor, aber nach dem Lesen this stack answer habe ich es viel besser verstanden - ich würde Ihnen wärmstens empfehlen, das gleiche zu tun. Danach ging es nur darum, die Reihenfolge der Elemente von JSON in das DOM herauszufinden.

ist hier ein WORKING DEMO:

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>

Statische 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> 

generiert 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>