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

user_12971059 0
Viewed 50

I need to break table headings well as table rows after 4 . Here I'm generating table dynamically from JSON string through jQuery. The table can contain maximum 16 columns, so I need to break it in 4 rows. The output should look like,

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

I'm using below code to generate HTML Table from JSON,

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

I have tried using $('').html($('#Test1 td:gt(4)')).appendTo('#Test1'); but it only breaks single row. I need to iterate it after every four td.

How can I do it?

jsp html jquery javascript
1 Answers

I'm able to achieve the same using below code,

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

Hope, this might help someone.

user_129710590
Related