javascript动态向表添加行

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

您需要将DOM API用于HTML表格元素。 它记录在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

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

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