使用innerHTML構建表格

本質上，我使用HTML構建表格，然後根據需要使用Javascript來添加更多信息。使用innerHTML構建表格

我建表所示：

<form id ="shopping_form"> 

     <!-- SHOPPING TABLE --> 
     <table id = 'items_table' border = 1> 
      <tr><th colspan = '2'>Shopping List</th></tr> 
      <tr><th>Item</th><th>Price</th></tr> 
     </table> 
</form>

這將構建一個表，並給它標頭。後來我想用Javascript將信息添加到表格中。我知道我在邏輯上正確地做了這件事，但我遇到了一些我無法想象的語法錯誤。

的Javascript：

//Add items to shopping table 
       for(var ctr = 0; ctr < 10; ctr++) 
       { 
        shopping_form.items_table.innerHTML = '<tr>'; 
         shopping_form.items_table.innerHTML += '<td>' + itemList[ctr].item + '</td>'; 
         shopping_form.items_table.innerHTML += '<td>' + itemList[ctr].price + '.00' + '</td>'; 
        shopping_form.items_table.innerHTML += '</tr>'; 
       }

來源

2016-10-03 Jacob Sedore

「一些語法錯誤，我似乎無法人物去「。更加詳細一些。你得到什麼錯誤，並在什麼路線？ – Amy

[使用JavaScript動態添加/刪除表格行]（http://stackoverflow.com/questions/6473111/add-delete-table-rows-dynamically-using-javascript） –

「語法錯誤的地方，我似乎無法弄清楚「，那麼你應該發佈一個關於這些具體錯誤的問題，而不是要求某人嘗試和複製你的設置並找出那些錯誤是什麼。爲了提出一個好問題，並提高獲得有用答案的可能性，您希望*儘可能簡單*讓別人來幫助您。 –

第一，你不能僅僅通過鍵入其ID選擇DOM元素！您將需要使用 document.getElementById來獲取元素。然後你可以開始添加文本到它的內部html，但你必須在第一次使用+=不會替換標題元素。

你的JS是：

var itemList = [ 
      {'item': '1', 'price' : '100'}, 
      {'item': '2', 'price' : '200'}, 
      {'item': '3', 'price' : '300'}, 
      {'item': '4', 'price' : '400'}, 
      {'item': '5', 'price' : '500'} 
      ] 
//Add items to shopping table 
items_table = document.getElementById('items_table'); 
for(var ctr = 0; ctr < 5; ctr++) 
{ 
    items_table.innerHTML+= '<tr><td>' + itemList[ctr].item + '</td><td>' + itemList[ctr].price + '.00' + '</td></tr>'; 
}

這裏是一個爲 Demo example這個

OR 可以使用 insertRow() and insertCell()方法某處

來源

2016-10-03 17:38:30

使用innerHTML構建表格

回答

相關問題