如何使用循环创建新的 table 单元格？

Question

如何使用循环创建新的 table 单元格，检查有多少行并在每行末尾添加一个新的 table 单元格？

示例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>

这就是我创建一个 td 的方式：

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 语句一起使用的方式：

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

Answer 1

您可以使用 Array.prototype.forEach() 来完成您要查找的内容。我在从 querySelectorAll 返回的 NodeList 上调用 Array 的 slice()，这样我就可以在其上使用 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>

如何使用循环创建新的 table 单元格？

How to create new table cells with loop?

javascript

tablecell