[英]Dynamic HTML Table row creation using 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}]}]}]}]}]
這是我想要達到的目標
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>
我無意為您完成任務,但希望這個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();
}
您可以為此使用遞歸。 此版本還將根據輸入內容動態確定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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.