javascript - 使用 Javascript 在每个表格单元格中插入一些内容

Question

我沉迷于 jQuery，并且无法使用纯 JavaScript 循环遍历每个 <td>在页面上并插入 <input> 。谁能帮我完成这个简单的任务吗？

Answer 1

如果你喜欢 jQuery 那么你应该找到 querySelectorAll用于选择 DOM 元素的方法很有趣。您可以尝试这样的操作，将输入插入到页面上的每个 td 中:

var tds = document.querySelectorAll('td');

Array.prototype.slice.call(tds).forEach(function(td) {
    var input = document.createElement('input');
    input.type = 'text';
    td.appendChild(input);
});

<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

当然，您可以使用老式的for循环来代替花哨的forEach:

for (var i = 0; i < tds.length; i++) {
    // ...
}

除了 querySelectorAll('td') 之外，还有

var tds = document.getElementsByTagName('td');