Question

我正在尝试创建一个注册一组数字的应用程序，然后这些数字将显示在表格中。我可以注册第一组数字，但如果我更改数字并再次按下注册，我将不会获得新的一行。相反，它会更新同一行。

基本上我试图让这个程序按照注册按钮创建一个新行的方式工作。

window.onload = oppdater;



    function oppdater() {
        document.getElementById("btnRegistrer").onclick = registrer;
    }

    function registrer() {
        var arrayListe = [];
        var reg = {};

        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 rute = 0;
        var nyBestilling = document.createElement("tr");
        for (var i = 0; i < 5; i++) {
            var rad = document.createElement("td");
            rad.id = "rute"+i;
            rute++;
            nyBestilling.appendChild(rad);
        }
        tabell.appendChild(nyBestilling);

        for (var j = 0; j < 5; j++) {
            var inputt = document.getElementById("rute"+j);
            inputt.innerHTML = arrayListe[j];
        }

    }
    </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>

Answer 1

元素id值为unique：

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

您正在rad.id = "rute"+i;

中创建具有重复ID的元素

要么不为元素分配ID，要么分配（首选）并保留对它们的引用，如果你想操纵它们或将i保留在函数之外并将i增加到每个值的新值迭代。

Answer 2

未经测试，但应该有效。

    var nyBestilling = document.createElement("tr");
    for (var i = 0; i < 5; i++) {
        var rad = document.createElement("td");
        rad.innerHTML = arrayListe[i];
        nyBestilling.appendChild(rad);
    }
    tabell.appendChild(nyBestilling);

并删除最后一个for循环。

如果您基于ID进行样式设置，则可以保留它们，但最好将它们更改为类并更新CSS定义。

使用Javascript和动态变量创建表

2 个答案: