如何让jQuery从JSON动态生成的HTML表格每4个单元格就拆分换行

直接在动态生成表格时按每4个单元格为一组创建新行即可，无需后续拆分DOM，逻辑更简洁，修改后的完整代码如下：

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]);
        }
    }
}
// 定义每行固定显示4列
const COLS_PER_ROW = 4;
// 创建动态表格
var table = document.createElement("table");
table.setAttribute("border", "1"); // 可根据需求保留或删除该样式

// 按每4个一组拆分表头和对应数据生成行
for (let i = 0; i < colHeader.length; i += COLS_PER_ROW) {
    // 生成当前组表头行
    let headerGroup = colHeader.slice(i, i + COLS_PER_ROW);
    let tr = table.insertRow(-1);
    for (let thText of headerGroup) {
        var th = document.createElement("th");
        th.setAttribute("class", "RptHeader");
        th.innerHTML = thText;
        tr.appendChild(th);
    }
    // 生成当前组对应数据行
    let valueGroup = rowValue.slice(i, i + COLS_PER_ROW);
    tr = table.insertRow(-1);
    for (let val of valueGroup) {
        var tabCell = tr.insertCell(-1);
        tabCell.innerHTML = val;
    }
}

$('#Div<%=i%>').append(table);

补充说明 #

如果需要对已经生成的现有表格做拆分，可以使用下面的jQuery实现：

const COLS_PER_ROW = 4;
$('table tr').each(function(){
    const $cells = $(this).children();
    if($cells.length <= COLS_PER_ROW) return;
    // 从第5个单元格开始分组拆分
    for(let i = COLS_PER_ROW; i < $cells.length; i += COLS_PER_ROW){
        let $newRow = $('<tr></tr>');
        $cells.slice(i, i + COLS_PER_ROW).appendTo($newRow);
        $newRow.insertAfter($(this));
    }
})

内容的提问来源于stack exchange，提问作者S B