ダイナミック＆コンプレックスROWSPAN

Question

Link to JSFiddle

ここでは私の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 
} 

です。ここで

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

は私が達成しようとしているものです

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> 

質問：

私が成功した最初の2つの列を作成した（ややけれども醜い、私は後でそれを洗練することができると思った）、私は3列目で立ち往生しています。私が投稿したコードは正しく最初の2つの列を作成しますが、rowspan（3列目）内のrowspanのロジックは私を逃しているようです。私を案内してください。

Answer 1

私は正直なところ、rowspanを一度も使用していませんでしたが、this stack answerを読んだ後、私はそれをもっとよく理解しました。その後、JSONからDOMへの要素の順序を調べるだけでした。ここで

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

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

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>