Как создать новые ячейки таблицы с помощью цикла?

Question

Как создать новые ячейки таблицы с циклом, который проверяет, сколько строк есть, и добавляет новую ячейку таблицы в конце каждой строки?

Пример HTML:

<table id ="my_table"> 
        <thead> 
         <tr> 
          <th>lorem ipsum</th> 
          <th>lorem ipsum</th> 
          <th>lorem ipsum</th> 
          <th>lorem ipsum</th> 
          <th>lorem ipsum</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td><input type ="text" size ="3" value ="1"/></td> 
         </tr> 
         <tr> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td>lorem ipsum</td> 
          <td><input type ="text" size ="3" value ="1"/></td> 
         </tr> 

Это, как я создаю один тд:

function my_test() { 
    var my_tbody = document.getElementById('my_table').getElementsByTagName('tbody')[0].rows[0]; 
    var my_td = document.createElement('td'); 
    my_td.innerHTML = 'test';  
    my_table.appendChild(my_td); 
} 

Вот как я думал, что это будет работать с за-заявление:

for (var i = 0; i < my_table.length; i++) { 
...and then the code above in here. 
} 

Answer 1

Вы можете использовать Array.prototype.forEach(), чтобы выполнить то, что вы ищете. Я вызываю Array slice() на NodeList, возвращенный с querySelectorAll, поэтому я могу использовать функции Array на нем.

var tbody = document.getElementById('my_table').querySelectorAll('tbody tr'), 
 
    rows = Array.prototype.slice.call(tbody); 
 

 
rows.forEach(function(row) { 
 
    var td = document.createElement('td'); 
 
    td.textContent = 'New node'; 
 
    row.appendChild(td); 
 
});

<table id="my_table"> 
 
    <thead> 
 
    <tr> 
 
     <th>lorem ipsum</th> 
 
     <th>lorem ipsum</th> 
 
     <th>lorem ipsum</th> 
 
     <th>lorem ipsum</th> 
 
     <th>lorem ipsum</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td> 
 
     <input type="text" size="3" value="1" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td>lorem ipsum</td> 
 
     <td> 
 
     <input type="text" size="3" value="1" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>