动态与HTML表中的复杂行跨度 [英] Dynamic & Complex rowspan in HTML table

问题描述

链接到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
}

这是我用来动态创建表的函数.

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

这就是我要实现的目标

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>

问题:

我成功创建了前两列(尽管有些丑陋，以为以后可以改进它)，但我仍然停留在第三列.我发布的代码正确地创建了前两列，但是rowspan(第三列)中rowspan的逻辑似乎使我难以理解.请引导我.

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.

推荐答案

老实说，我以前从未使用过rowspan，但是在阅读 此堆叠答案 我对它的理解要好得多-我强烈建议您也这样做.在那之后，只需要弄清楚从JSON到DOM的元素顺序即可.

I honestly had never used rowspan before, but after reading this stack answer I understood it much better - I would highly recommend you do the same. After that, it was just a matter of figuring out the order of the elements from JSON into the DOM.

这是一个工作样本:

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>

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

这篇关于动态与HTML表中的复杂行跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！