Here is my 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
}
This is the function which I am using to dynamically create the table.
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);
});
}
}
Here is what I am trying to achieve
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>
Question :
I successfully created the first two columns(though somewhat ugly, thought I can refine it later), I'm stuck at the third column. The code I posted creates the first two columns correctly but the logic for the rowspan within the rowspan(third column) seems to elude me. Please guide me.