Строительный стол с 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

первый вы не можете выбрать 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 для этого

ИЛИ вы можете использовать insertRow() and insertCell() методы

ошибки