为何input标签无法在表格其他列中正常渲染？

核心问题：DOM元素不能重复挂载 #

你只创建了一个inputBox元素，然后多次调用appendChild把它添加到不同单元格里。但DOM元素在文档中只能存在一个位置，每次调用appendChild都会把它从之前的父节点移除，最终只有最后一个单元格能显示这个输入框，前面的单元格自然为空。

修复步骤： #

1. 为每个单元格单独创建输入框
   不要复用同一个input元素，需要输入框的单元格都单独创建新的input实例。
2. 修正HTML表格的非法嵌套
   <table>标签内不能直接放<div>，浏览器会自动修正这个错误结构导致表头布局混乱，应该用<thead>包裹表头行，符合表格标准结构。
3. 补全未闭合的HTML标签
   表头的<tr>标签没有闭合，需要补上</tr>。

修正后的完整代码： #

HTML部分：

<body>
    <div class="header">
        <h1>Inventory</h1>
    </div>
    <div class="grades">
        <table id="inventory">
            <thead class="tableHeader">
                <tr>
                    <th>Item</th>
                    <th>PUG</th>
                    <th>Amount</th>
                    <th>PUB</th>
                    <th>Amount</th>
                    <th>NP</th>
                    <th>Amount</th>
                    <th>Notes</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

JavaScript部分：

// 先确保phoneOne等变量已定义，示例如下：
const phoneOne = { modelName: "Phone 1", pug: "PUG-001", pub: "PUB-001", np: "NP-001" };
const phoneTwo = { modelName: "Phone 2", pug: "PUG-002", pub: "PUB-002", np: "NP-002" };
const phoneThree = { modelName: "Phone 3", pug: "PUG-003", pub: "PUB-003", np: "NP-003" };
const phoneFour = { modelName: "Phone 4", pug: "PUG-004", pub: "PUB-004", np: "NP-004" };

var products = [phoneOne, phoneTwo, phoneThree, phoneFour];

function populateItems(i){
    var inventory = document.getElementById("inventory");
    var insertRow = inventory.insertRow(1);
    var cell1 = insertRow.insertCell(0);
    var cell2 = insertRow.insertCell(1);
    var cell3 = insertRow.insertCell(2);
    var cell4 = insertRow.insertCell(3);
    var cell5 = insertRow.insertCell(4);
    var cell6 = insertRow.insertCell(5);
    var cell7 = insertRow.insertCell(6);
    var cell8 = insertRow.insertCell(7);

    cell1.textContent = products[i].modelName;
    cell2.textContent = products[i].pug;
    // 为每个需要输入框的单元格单独创建input
    cell3.appendChild(document.createElement("input"));
    cell4.textContent = products[i].pub;
    cell5.appendChild(document.createElement("input"));
    cell6.textContent = products[i].np;
    cell7.appendChild(document.createElement("input"));   
    cell8.appendChild(document.createElement("input"));
}
for (i=0; i<products.length; i++){
    populateItems(i);
}

额外提示： #

• 原代码中cell6.textContent = products[i].pub是笔误，对应表头的NP字段，已修正为products[i].np（需确保对象包含该属性）。
• 可以给input添加类名或type属性，方便后续样式控制或数据获取。

内容的提问来源于stack exchange，提问作者Krischian