JavaScript动态变量创建表格问题：点击注册按钮无法新增行

我来帮你搞定这个问题！你现在的情况是第一次点击能新增行，但后续点击只会更新原有行，核心原因是你给新创建的表格单元格设置了重复的ID，导致后续更新内容时只能找到第一次创建的那些单元格，自然没法给新行填充数据。

问题代码的核心问题 #

看你的代码，在创建新行的<td>时，每个单元格的ID都是rute0、rute1这种固定格式：

rad.id = "rute"+i;

第二次点击按钮时，又会生成一批ID完全相同的<td>元素，而document.getElementById()只会返回页面上第一个匹配该ID的元素，所以你每次都是在更新第一行的内容，而非新添加的行。

修改后的完整代码 #

下面是修复后的代码，我调整了内容填充的逻辑，不再依赖重复ID：

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = oppdater;
        function oppdater() {
            document.getElementById("btnRegistrer").onclick = registrer;
        }
        function registrer() {
            var arrayListe = [];
            var verdi0 = parseInt(document.getElementById("txtUke").value);
            var verdi1 = parseInt(document.getElementById("txtAntmiddager").value);
            var verdi2 = parseInt(document.getElementById("txtBarn").value);
            var verdi3 = parseInt(document.getElementById("txtUngdom").value);
            var verdi4 = parseInt(document.getElementById("txtVoksne").value);
            
            arrayListe.push(verdi0);
            arrayListe.push(verdi1);
            arrayListe.push(verdi2);
            arrayListe.push(verdi3);
            arrayListe.push(verdi4);
            
            var tabell = document.getElementById("tblTabell");
            var nyBestilling = document.createElement("tr");
            
            // 创建单元格时直接填充内容，不用设置重复ID
            for (var i = 0; i < 5; i++) {
                var rad = document.createElement("td");
                // 直接将当前数组值赋值给单元格内容
                rad.innerHTML = arrayListe[i];
                nyBestilling.appendChild(rad);
            }
            
            tabell.appendChild(nyBestilling);
            
            // 可选：清空输入框，方便下次录入
            document.getElementById("txtUke").value = "";
            document.getElementById("txtAntmiddager").value = "";
            document.getElementById("txtBarn").value = "";
            document.getElementById("txtUngdom").value = "";
            document.getElementById("txtVoksne").value = "";
        }
    </script>
</head>
<body>
    <h1>Bestillinger</h1>
    <p>Uke nr: <input type="text" id="txtUke"></input></p>
    <p>Antall middager: <input type="text" id="txtAntmiddager" max="3" min="2"></input></p>
    <p>Antall barn: <input type="text" id="txtBarn"></input></p>
    <p>Antall ungdom: <input type="text" id="txtUngdom"></input></p>
    <p>Antall voksne: <input type="text" id="txtVoksne"></input></p>
    <button id="btnRegistrer">Registrer</button>
    <table id="tblTabell">
        <tr><th>Uke</th><th>Ant. middager</th><th>Ant. barn</th><th>Ant. ungdom</th><th>Ant. voksne</th></tr>
    </table>
</body>
</html>

关键修改点说明 #

1. 移除重复ID设置：不再给每个<td>设置rute+i这种重复ID，避免ID冲突问题
2. 直接填充单元格内容：在创建每个<td>的同时，就把对应的数组值赋值给它的innerHTML，不需要后续再通过ID查找元素
3. 添加输入框清空逻辑（可选）：每次注册后清空输入框，提升用户体验，方便下一次录入

这样修改后，每次点击「Registrer」按钮都会新增一行包含当前输入内容的表格行，不会再出现更新旧行的情况啦！

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