Question

我试图弄清楚如何使用javascript动态地向表中添加行。我在没有桌子的情况下进行了测试并且可以获得数据，但是在填充表格时我很难过。

我在一个应该填充表格的按钮上有一个函数调用。以下是我目前的代码：

  <table id="tblData" class="pure-table">
                <thead>
                    <tr>
                        <th>Staff</th>
                        <th>Orders</th>
                    </tr>
                </thead>
                <tbody>
                    <!--<tr class="pure-table-odd">
                            <td>Jim</td>
                            <td>2</td>
                        </tr>-->

                </tbody>
            </table>


 function getData()
 {
var soData = JSON.parse(staffOrders);
var i = 0;
var c = getRowCount(); 

//build table
var table = document.getElementById("tblData");

while (i <= c) {
    //alert(soData[i].staffName + " had " + soData[i].orders + " orders.");
    //"<td>" + soData[i].staffName + "</td>"
    //"<td>" + soData[i].orders + "</td>"
    i++;
}
 }

Answer 1

您需要为HTML表格元素使用DOM API。它记录在案 http://www.w3schools.com/jsref/dom_obj_table.asp

以下是http://www.w3schools.com/jsref/met_table_insertrow.asp的一个例子：

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the     table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the     "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Answer 2

试试这段代码

window.onload = function(){
function getData() {
      var soData = [{orders : 'order1', staffName : 'staffName1'}, {orders : 'order2', staffName : 'staffName2'}]
      var i = 0;
      var c = 2;
    
      //build table
      var table_body = document.getElementById("tblData").getElementsByTagName('tbody')[0];
      while (i <= c) {
        var tr = document.createElement('tr');
        tr.className = "pure-table-odd"; // add class in tr
        var td1 = document.createElement('td');
        td1.innerHTML = soData[i].orders;
        var td2 = document.createElement('td');
        td2.innerHTML = soData[i].staffName;
        tr.appendChild(td1);
        tr.appendChild(td2);
        table_body.appendChild(tr);
        i++;
      }
};
  getData();
}

<table id="tblData" class="pure-table">
                <thead>
                    <tr>
                        <th>Staff</th>
                        <th>Orders</th>
                    </tr>
                </thead>
                <tbody>
                    <!--<tr class="pure-table-odd">
                            <td>Jim</td>
                            <td>2</td>
                        </tr>-->

                </tbody>
            </table>

Answer 3

＆＃13;

function getData() {
  var responseData = [{
    "staffName": "Wilkerson Bowman",
    "orders": 26
  }, {
    "staffName": "Finley Nunez",
    "orders": 26
  }, {
    "staffName": "Katie Estrada",
    "orders": 7
  }];
  var thead = document.querySelector('#tblData thead');

  responseData.forEach(function(data) {
    var row = document.createElement('tr');
    row.innerHTML = '<td>' + data.staffName + '</td><td>' + data.orders + '</td>';
    thead.appendChild(row);
  });
}

getData();

＆＃13;

<table id="tblData" class="pure-table">
  <thead>
    <tr>
      <th>Staff</th>
      <th>Orders</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

＆＃13;

javascript动态地向表中添加行

3 个答案: