使用JSON

时间：2017-10-28 20:28:50

标签： javascript jquery html json

问题：寻找Jquery或javascript解决方案，使用低于JSON结构的colspan创建动态表行。我正面临着创造问题的问题 所需的行。我尝试了很多场景，但找不到TR来附加TH。

非常感谢您的帮助。

这是我的JSON格式

[{"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}]}]}]}]}]

这是我想要实现的目标

enter image description here

HTML结构

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

2 个答案:

答案 0 :(得分：0)

我不打算为你做任务，但希望这个JSFiddle可以帮助你了解如何做到这一点。我还提供了一种非常简单的方法，可以根据单击的标题对列进行排序。在了解了我在这里渲染此表后所做的事情之后，以编程方式添加colspans应该不会太困难。查看document.getElementById（）。setAttribute（attributeName，value）以获得实现此目的的方法。

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

如果您有任何疑问，请告诉我们。）

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

答案 1 :(得分：0)

您可以使用递归。此版本还将根据输入中的内容动态确定colspan值。只有在超过1时才会添加它们。注意colspan为零是没有意义的。

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>

相关问题
最新问题