javascript - Dynamic & Complex rowspan in HTML table -

link jsfiddle

here 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 function using dynamically create table.

function generatetable(data){ //data parsed json object ajax request     $("#test-table tbody").empty();//empty 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( == 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 trying 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 created first 2 columns(though ugly, thought can refine later), i'm stuck @ third column. code posted creates first 2 columns correctly logic rowspan within rowspan(third column) seems elude me. please guide me.

i had never used rowspan before, after reading this stack answer understood better - highly recommend same. after that, matter of figuring out order of elements json dom.

here 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 parsed json object ajax request    data = json.parse(data);    $("#test-table tbody").empty(); //empty 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>