用Javascript和动态变量创建表

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值是唯一的：

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

您正在rad.id = "rute"+i;中创建具有重复ID的元素rad.id = "rute"+i;

要么不分配的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 个解决方案

解决方案1
0 2018-05-29 17:28:43

解决方案2
0 2018-05-29 17:32:03

用Javascript和动态变量创建表

问题描述

2 个解决方案

解决方案1 0 2018-05-29 17:28:43

解决方案2 0 2018-05-29 17:32:03

解决方案1
0 2018-05-29 17:28:43

解决方案2
0 2018-05-29 17:32:03