Question

我已经尝试过查看源代码，了解一下创建行和单元格的方法，但是我肯定会出错，输出会将所有数据放入标题中。并没有生成行。

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>

编辑：我可能在代码中有很多不必要的毛茸茸，这来自我的尝试和错误尝试。

Answer 1

有一些更正，请参阅代码。

＆＃13;

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

＆＃13;

td {
  text-align: center;
}

＆＃13;

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

＆＃13;

Answer 2

少数事情：

你想把TR放在TR里面。创建一个或使用现有的，但不能同时使用两者。
你身体部分有th.appendChild ......应该是td，而不是th。
你必须将td附加到正文部分的tr。

这应该有效：

      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

为每行创建一个td元素并添加到tr。
对于每个标头，请创建th并添加到第一个tr元素。
您的表格字体设置为white，使文字在白色背景中不可见。

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

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

3 个答案: