使用 Javascript 和动态变量创建表答案

【问题标题】：Creating table with Javascript and dynamic variables使用 Javascript 和动态变量创建表
【发布时间】：2018-05-30 04:13:58
【问题描述】：

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

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

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>

【问题讨论】：

Prefer Number to parseInt, parseInt 对前导零的行为非常奇怪（将它们解析为八进制）。如果您必须获取“整数”值，则首选Number.parseInt 并传递基数参数：Number.parseInt(string, 10)。
您在复制 ID。对于每一行。 ID 意味着每个页面都是唯一的。避免所有麻烦并在附加到表之前填充 td innerHTML，而不是在添加后获取它们。

标签： javascript arrays html-table

【解决方案1】：

元素id 的值为unique：

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

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

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

【讨论】：

【解决方案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 定义。

【讨论】：