用数据填充表的功能，不起作用

Question

I've tried looking at sources to learn a little on a method of creating rows and cells, however I'm surely getting something wrong, the output puts all the data into the header. and doesnt generate rows.

Javscript:

    function addRepairData() {
    // Select the Table
    var tbl = document.getElementById('repairInnerTable');
    var headerText = ["ID", "Status", "Assigned To"];
    var cellText = ["1", "Full", "willy wonka"];
    // Set number of rows
    var rows = 10;

    var columns = headerText.length;

    // create table header
    for (var h = 0; h < columns; h++) {
            var th = document.createElement("TH");
            var thText = document.createTextNode(headerText[h]);
            th.appendChild(thText);
            document.getElementById("tableHead").appendChild(th);
    }


    for (var r = 0; r < rows; r++) {
        var tr = document.createElement("TR");
        var rowid = "row" + r;
        document.getElementById(rowid).appendChild(tr);

        for (var c = 0; c < columns; c++) 
        {
            var td = document.createElement("TD");
            var tdText = document.createTextNode(cellText[c]);
            th.appendChild(tdText);
        }
    }

HTML:

        <div class="stTableContainer"  id="repairsTable">
            <table style="width: 100%; color:white;" id="repairInnerTable">
                <tr id="tableHead">
                </tr>

                <tr id="row0"></tr>
                <tr id="row1"></tr>
                <tr id="row2"></tr>
                <tr id="row3"></tr>
                <tr id="row4"></tr>
                <tr id="row5"></tr>
                <tr id="row6"></tr>
                <tr id="row7"></tr>
                <tr id="row8"></tr>
                <tr id="row9"></tr>

            </table>
        </div>

EDIT: I might have a lot of unneeded fluff in the code, that's from my trial and error attempts.

Answer 1

There are a few corrections, see code.

 function addRepairData() { // Select the Table var tbl = document.getElementById('repairInnerTable'); var headerText = ["ID", "Status", "Assigned To"]; var cellText = ["1", "Full", "willy wonka"]; // Set number of rows var rows = 10; var columns = headerText.length; // create table header for (var h=0; h<columns; h++) { var th = document.createElement('th'); var thText = document.createTextNode(headerText[h]); th.appendChild(thText); document.getElementById('tableHead').appendChild(th); } for (var r=0; r<rows; r++) { var rowid = 'row' + r; var tr = document.getElementById('row' + r); for (var c=0; c<columns; c++) { var td = document.createElement('td'); td.appendChild(document.createTextNode(cellText[c])); tr.appendChild(td); } } } addRepairData(); 

 td { text-align: center; } 

 <div class="stTableContainer" id="repairsTable"> <table style="width: 100%;" id="repairInnerTable"> <tr id="tableHead"></tr> <tr id="row0"></tr> <tr id="row1"></tr> <tr id="row2"></tr> <tr id="row3"></tr> <tr id="row4"></tr> <tr id="row5"></tr> <tr id="row6"></tr> <tr id="row7"></tr> <tr id="row8"></tr> <tr id="row9"></tr> </table> </div> 

Answer 2

Few things:

• You're trying to put a TR inside of a TR. Either create one or use the existing ones, but not both.
• you've got th.appendChild in the body section...should be td, not th.
• you have to append the td to the tr in the body section.

This should work:

  addRepairData(); function addRepairData() { // Select the Table var tbl = document.getElementById('repairInnerTable'); var headerText = ["ID", "Status", "Assigned To"]; var cellText = ["1", "Full", "willy wonka"]; // Set number of rows var rows = 10; var columns = headerText.length; var thead = document.getElementById("tableHead"); // create table header for (var h = 0; h < columns; h++) { var th = document.createElement("TH"); var thText = document.createTextNode(headerText[h]); th.appendChild(thText); thead.appendChild(th); } for (var r = 0; r < rows; r++) { var tr = document.createElement("TR"); var rowid = "row" + r; tbl.appendChild(tr); for (var c = 0; c < columns; c++) { var td = document.createElement("TD"); var tdText = document.createTextNode(cellText[c]); td.appendChild(tdText); tr.appendChild(td); } } } 

  <div class="stTableContainer" id="repairsTable"> <table style="width: 100%;background:gray; color:white;" id="repairInnerTable"> <tr id="tableHead"></tr> </table> </div> 

Answer 3

• For each row create a td element and add to the tr .
• For each header create a th and add to the first tr element.
• Your table font is set to white makes the text not visible in a white background.

  // Select the Table var tbl = document.getElementById('repairInnerTable'); var trh = document.getElementById('tableHead'); var headerText = ["ID", "Status", "Assigned To"]; var cellText = ["1", "Full", "willy wonka"]; // Set number of rows var rows = 10; var columns = headerText.length; // create table header for (var h = 0; h < columns; h++) { var th = document.createElement("th"); th.innerText = headerText[h]; trh.appendChild(th); } for (var r = 0; r < rows; r++) { var tr = document.getElementById("row" + r); for (var c = 0; c < columns; c++) { var td = document.createElement("td"); td.innerText = cellText[c]; tr.appendChild(td); } } 

  <div class="stTableContainer" id="repairsTable"> <table style="width: 100%;" id="repairInnerTable"> <tr id="tableHead"> </tr> <tr id="row0"></tr> <tr id="row1"></tr> <tr id="row2"></tr> <tr id="row3"></tr> <tr id="row4"></tr> <tr id="row5"></tr> <tr id="row6"></tr> <tr id="row7"></tr> <tr id="row8"></tr> <tr id="row9"></tr> </table> </div>