Click here to Skip to main content
13,802,354 members
Rate this:
 
Please Sign up or sign in to vote.
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:

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 12-Oct-18 4:32am
Updated 14-Oct-18 19:56pm
v4
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

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()
  Permalink  
Comments
Syf AK 15-Oct-18 0:53am
   
Thanks a lot
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

In case anyone needed:


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);
        }
  Permalink  
v2

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web04 | 2.8.181215.1 | Last Updated 15 Oct 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100