Click here to Skip to main content
15,921,660 members
Please Sign up or sign in to vote.
1.80/5 (2 votes)
See more:
I know how to create headers for dynamic table but i want to create headers like(if i give input as 6*6 then the headers should be (|Label| control||Label| control||Label| control|) display like this. How can i repeat the headers.

Thanks.

What I have tried:

JavaScript
function createTable() {
    var rowCtr;
    var cellCtr;
    var rowCnt;
    var cellCnt;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.setAttribute("contenteditable", "true");
    table.border = '1';
    table.id = "myTable";
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var orderArrayHeader = ["Label", "Control"];
    var thead = document.createElement('thead');
    table.appendChild(thead);
    for (var i = 0; i < orderArrayHeader.length; i++) {
    thead.appendChild(document.createElement("th")).
    appendChild(document.createTextNode(orderArrayHeader[i]));
}
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var thead = document.createElement("thead");
        thead.innerHTML = "Header";
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            tr.appendChild(thead);
            var td = document.createElement('TD');
            td.width = '120';
            td.appendChild(document.createTextNode("Row" + rowCtr + " Column" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
  }
Posted
Updated 14-Oct-18 18:56pm
v4

try this

results = {
  weak_sent: [
    "row 1 data",
    "row 2 data"
  ],
  weak_sent_num: [1,2]
}
function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    //var header = document.createElement("header");
    // var header = '<tr><th>Country</th><th>City</th></tr>';
    var header=  document.createElement('thead')
    var headingRow = document.createElement('tr')

    var headingCell1 = document.createElement('td')
    var headingText1 = document.createTextNode('country')
    headingCell1.appendChild(headingText1)
    headingRow.appendChild(headingCell1)
    
    var headingCell2 = document.createElement('td')
    var headingText2 = document.createTextNode('City')
    headingCell2.appendChild(headingText2)
    headingRow.appendChild(headingCell2)

    header.appendChild(headingRow)
    tbl.appendChild(header)
    //var header = "<th>Header</th>";
    var tblBody = document.createElement("tbody");


    // creating all cells
    for (var i = 0; i < results.weak_sent.length; i++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (j == 0) {
                var cellText = document.createTextNode(results.weak_sent_num[i]);
            } else {
                var cellText = document.createTextNode(results.weak_sent[i]);
            }


            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    // This is for the quick solution
    // tbl.innerHTML = header

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);



    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

generate_table()
 
Share this answer
 
Comments
Syf AK 15-Oct-18 0:53am    
Thanks a lot
In case anyone needed:


JavaScript
function CreateTable() {

            var rowCtr;
            var cellCtr;
            var rowCnt = getValue;
            var cellCnt = getValue;
            var myTableDiv = document.getElementById('myDynamicTable');
            var table = document.createElement('TABLE');
            myDynamicTable.setAttribute("contenteditable", "true");
            table.border = '1';
            table.id = 'myTable';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            var orderArrayHeader = ["Label", "Control"];
            var thead = document.createElement('thead');
            table.appendChild(thead);
            for (var i = 0; i < cellCnt; i++) {
                if (i % 2 == 0) {
                    thead.appendChild(document.createElement("th")).
                appendChild(document.createTextNode(orderArrayHeader[0]));
                }
                else {
                    thead.appendChild(document.createElement("th")).
                appendChild(document.createTextNode(orderArrayHeader[1]));
                }
            }
            for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);

                for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('TD');
                    td.width = '120';
                    td.height = '50';
                    td.appendChild(document.createTextNode(""));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
        }
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900