如何将行从特定 <td> 换到下一行？

Question

我需要在 4 之后打破 table 标题和 table 行。在这里，我通过 jQuery 从 JSON 字符串动态生成 table。 table 最多可包含 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 Table

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 之后对其进行迭代。

我该怎么做？

Answer 1

我可以使用下面的代码实现相同的效果，

           `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%>');
                }
            });

希望，这可能对某人有所帮助。

如何将行从特定 <td> 换到下一行？

How can I break row from specific <td> to next row?

html

javascript

jquery

jsp