rowspan dinamico e complesso nella tabella HTML

Question

Link to JSFiddle

Ecco il mio formato 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 
} 

Questa è la funzione che sto usando per creare dinamicamente la tabella.

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

Ecco quello che sto cercando di realizzare

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> 

Domanda:

ho creato con successo le prime due colonne (se un po ' brutto, ho pensato di perfezionarlo più tardi), sono bloccato alla terza colonna. Il codice che ho postato crea correttamente le prime due colonne ma la logica per il rowspan all'interno del rowspan (terza colonna) sembra sfuggirmi. Per favore guidami.

Answer 1

Sinceramente non avevo mai usato rowspan prima, ma dopo aver letto this stack answer l'ho capito molto meglio - consiglio vivamente di fare lo stesso. Dopodiché, era solo questione di capire l'ordine degli elementi da JSON nel DOM.

Ecco una demo funzionante:

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>

HTML statico

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

HTML generato

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