使用JSON创建动态HTML表行

Question

Question: Looking for Jquery or javascript solution to create dynamic table rows with colspan using below JSON structure. I am facing issue to create the required rows. I have tried many scenarios but cannot locate the TR to append the TH.

your help is much appreciated.

Here is my JSON format

[{"data":"test","nodes":[{"data":"5.00%","nodes":[{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]},{"data":"5.00%","nodes":[{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]}]}]

Here is what i am trying to achieve

enter image description here

HTML structure

<table>
  <tr>
    <th colspan="36">test</th>
  </tr>
  <tr>
    <td colspan="18">5.00%</td>
    <td colspan="18">5.00%</td>
  </tr>
  <tr>
    <td colspan="6">5.00%</td>
    <td colspan="6">70.00%</td>
    <td colspan="6">80.00%</td>
    <td colspan="6">5.00%</td>
    <td colspan="6">70.00%</td>
    <td colspan="6">80.00%</td>
  </tr>
  <tr>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
    <td colspan="1">Jul 2014</td>
    <td colspan="1">Aug 2014</td>
    <td colspan="1">Sep 2014</td>
    <td colspan="1">Oct 2014</td>
    <td colspan="1">Nov 2014</td>
    <td colspan="1">Dec 2014</td>
  </tr>
</table>

Answer 1

I don't intend to do the assignment for you but hopefully this JSFiddle will help you with an idea of how you can go about doing this. I've also included a very simple way to sort the columns based on the header that is clicked. Programmatically adding the colspans shouldn't be too difficult after you understand what I've done here to render this table. Take a look at document.getElementById().setAttribute(attributeName, value) for a way to do that.

https://www.w3schools.com/jsref/met_element_setattribute.asp

Let me know if you have any questions :)

https://jsfiddle.net/cxb7h2ze/7/

HTML

<table>
<thead>
  <tr>
    <th onclick="column(0)">
      Column 1
    </th>
    <th onclick="column(1)">
      Column 2
    </th>
  </tr>
</thead>
<tbody id="table">

</tbody>
</table>

 <button onclick="renderArray()">
 Render Array
 </button>
 </button>

JS

array = [
  {column1: "Alphabetical name",
  column2: 2},
  {column1: "Couch Potato",
  column2: "3"},
  {column1: "Blah Blah",
  column2: 1},
];

var toggle  = [0,0]
window.renderArray = function() {
    var x;
  var tr;
  var td;
  var text;
  var button;
  var table = document.getElementById("table");
  // reset table so it doesn't append a duplicate set
  table.innerHTML = "";
  for (x = 0; x < array.length; x++) {
    // create a row
    tr = document.createElement("tr");
    tr.setAttribute("ondblclick", "alert('hello there this is row')");
    // create a cell
    td = document.createElement("td");
    // create text to go in cell
    text = document.createTextNode(array[x].column1);
    // append text to cell
    td.appendChild(text);
    //append cell to row
    tr.appendChild(td);
    // create a second cell
    td = document.createElement("td");
    // create a new text to go in cell
    text = document.createTextNode(array[x].column2);
    // append text to cell
    td.appendChild(text);
    // append cell to row
    tr.appendChild(td);
    // create cell
    td = document.createElement("td");
    // add row to column
    table.appendChild(tr);
  }
}

window.column = function(id) {
    toggle[id]++;
  if (id == 0) {
    // first column
    array.sort(function(a, b) {
        if (toggle[id] % 2 == 0) {
        return a.column1.toLowerCase() < b.column1.toLowerCase();
      }
        else {
        return a.column1.toLowerCase() > b.column1.toLowerCase();
      }
    })
  }
  else {
    array.sort(function(a, b) {
        if (toggle[id] % 2 == 0) {
        return a.column2 < b.column2;
      }
        else {
        return a.column2 > b.column2;
      }
    })
  }
  renderArray();
}

Answer 2

You could use recursion for this. This version will also determine the colspan values dynamically, based on what is in the input. They will only be added when more than 1. Note that a colspan of zero makes no sense.

 function objectToTable(data) { var $table = $("<table>"), $tableRows = $("tr", $table); function recurse(data, depth) { if (!data) return 1; if (depth >= $tableRows.length) { $table.append($("<tr>")); $tableRows = $("tr", $table); } var totalSpan = 0; $tableRows.eq(depth).append(data.map(function(column) { var colspan = recurse(column.nodes, depth+1); // Maybe you want the deepest values to be wrapped in normal TD tags: var $th = $(column.nodes ? "<th>" : "<td>").text(column.data); if (colspan > 1) $th.attr("colspan", colspan); totalSpan += colspan; return $th; })); return totalSpan; } recurse(data, 0); return $table; } var data = [{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]; $("body").append(objectToTable(data)); 

 table { border-collapse: collapse; } th, td { border: 1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>