innerHTMLを使用したビルディングテーブル

Question

基本的に私はHTMLでテーブルを作成し、次にJavascriptを使用して必要な情報を追加します。

私はそうのようなテーブルを作成：

<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>'; 
       } 

Answer 1

まず、あなただけの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>'; 
} 

は、ここで私は数字に見えることはできませんことをどこか insertRow() and insertCell()方法