使用Javascript和动态变量创建表_Javascript_Arrays_Html Table

使用Javascript和动态变量创建表

javascript arrays

使用Javascript和动态变量创建表,javascript,arrays,html-table,Javascript,Arrays,Html Table,我正在尝试制作一个应用程序，在其中注册一组数字，然后这些数字将显示在表中。我可以注册第一组数字，但如果我更改数字并再次按register，我将无法获得新行。而是更新同一行基本上，我试图使这个程序的工作方式，按下寄存器按钮将创建一个新行 window.onload = oppdater; function oppdater() { document.getElementById("btnRegistrer").onclick = registrer; }

我正在尝试制作一个应用程序，在其中注册一组数字，然后这些数字将显示在表中。我可以注册第一组数字，但如果我更改数字并再次按register，我将无法获得新行。而是更新同一行

基本上，我试图使这个程序的工作方式，按下寄存器按钮将创建一个新行

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>

window.onload=oppdater；
函数oppdater（）{
document.getElementById（“BTNRegister”）.onclick=register；
}
函数寄存器（）{
var arrayListe=[]；
var reg={}；
var verdi0=parseInt（document.getElementById（“txtUke”）.value）；
var verdi1=parseInt（document.getElementById（“txtantmidtager”）.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”）；
对于（变量i=0；i<5；i++）{
var rad=document.createElement（“td”）；
rad.id=“rute”+i；
rute++；
nyBestilling.appendChild（拉德）；
}
tabell.appendChild（nyBestilling）；
对于（var j=0；j<5；j++）{
var input=document.getElementById（“rute”+j）；
input.innerHTML=arrayListe[j]；
}
}
兽人
Uke nr：
安塔尔米德塔格：
安塔尔谷仓：
安塔尔大学：
安塔尔·沃克辛：
登记人
乌克兰人。中尉。巴南特。无知的。沃克斯内

元素

id

值为：

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

您正在

rad.id=“rute”+i中创建具有重复id的元素
如果要操作元素，请不要将ID分配给元素，或者分配（首选）并保留对元素的引用，或者将i
保留在函数之外，并在每次迭代时将i
递增到新值。
未测试，但应该可以工作
    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);

var nyBestilling=document.createElement（“tr”）；
对于（变量i=0；i<5；i++）{
var rad=document.createElement（“td”）；
rad.innerHTML=arrayListe[i]；
nyBestilling.appendChild（拉德）；
}
tabell.appendChild（nyBestilling）；

并删除最后一个for循环
如果您是基于ID设计样式，您可以保留它们，但最好将它们更改为类并更新CSS定义。
更喜欢Number
而不是parseInt
，parseInt
对前导零的作用非常奇怪（将它们解析为八进制）。如果必须获取“整型”值，则首选Number.parseInt
并传递基数参数：Number.parseInt（string，10）
。您正在复制ID。每行。每个页面的ID都是唯一的。避免所有麻烦，在添加到表之前填充td innerHTML，而不是在添加后获取它们。