javascript - 如何将行从特定行拆分到下一行?
问题描述
我需要在 4 之后打破表格标题以及表格行。在这里,我通过 jQuery 从 JSON 字符串动态生成表。该表最多可包含 16 列,因此我需要将其分成 4 行。输出应该看起来像,
<table border=1>
<thead>
<tr>
<th>COLUMN1</th>
<th>COLUMN2</th>
<th>COLUMN3</th>
<th>COLUMN4</th>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>val4</td>
</tr>
</thead>
<tbody>
<tr>
<th>COLUMN5</th>
<th>COLUMN6</th>
<th>COLUMN7</th>
<th>COLUMN8</th>
</tr>
<tr>
<td>val5</td>
<td>val6</td>
<td>val7</td>
<td>val8</td>
</tr>
</tbody>
</table>
我正在使用下面的代码从 JSON 生成 HTML 表,
var txnJson = JSON.parse('<%=jsonObj1%>');
var tableName;
var colspan = 0;
var colHeader = [];
var rowValue = [];
for (var key in txnJson) {
tableName = key;
console.log(key);
for (var secondKey in txnJson[key]) {
console.log(secondKey + ' : ' + txnJson[key][secondKey]);
for (var thirdkey in txnJson[key][secondKey]) {
colHeader.push(thirdkey);
rowValue.push(txnJson[key][secondKey][thirdkey]);
colspan = colspan +1;
console.log(thirdkey + ' : ' + txnJson[key][secondKey][thirdkey]);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < colHeader.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.setAttribute("class", "RptHeader");
th.innerHTML = colHeader[i];
tr.appendChild(th);
}
tr = table.insertRow(-1);
for (var j = 0; j < rowValue.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = rowValue[j];
}
$('#Div<%=i%>').append(table);
我试过使用 $('').html($('#Test1 td:gt(4)')).appendTo('#Test1'); 但它只会打破单行。我需要在每四个 td 之后对其进行迭代。
我该怎么做?
解决方案
我可以使用下面的代码实现相同的目标,
`var inp = document.createElement("input");
inp.setAttribute("type","hidden");
inp.setAttribute("id","colCnt<%=i%>");
inp.setAttribute("value",colLength);
$(function () {
var colCnt = $("#colCnt<%=i%>").val();
var thLen = 3;
var tdLen = 4;
$('<tr>').html($('#Tab<%=i%> th:gt('+thLen+')')).appendTo('#Tab<%=i%>');
$('<tr>').html($('#Tab<%=i%> td:gt('+tdLen+')')).appendTo('#Tab<%=i%>');
for (var k = 0; k < colCnt; k++) {
thLen = thLen + 4;
tdLen = tdLen + 4;
$('<tr>').html($('#Tab<%=i%> th:gt('+(thLen)+')')).appendTo('#Tab<%=i%>');
$('<tr>').html($('#Tab<%=i%> td:gt('+(tdLen)+')')).appendTo('#Tab<%=i%>');
}
});
希望,这可能对某人有所帮助。
推荐阅读
- html - 如何使用复选框和单选按钮创建手风琴
- python - Pandas 在数据帧上动态滚动
- javascript - Firebase.firestore() 不是函数?
- c++ - 如何让 std::thread 在 Eclipse 4.18 上工作?
- pytransitions - HierarchicalGraphMachine hiding nested states
- jenkins - How to throttle jobs with same parameters in a Jenkins multibranch pipeline?
- solr - How to upgrade Lucene Index of Solr from version 4.6 to 8.8.2?
- javascript - How can I get error highlighting for missing imports in Visual Studio Code?
- html - 请求没有得到完整的正文内容
- docusignapi - 单个文档docusign rest上的多个签名者