Javascript 使用 For 循环创建动态表，其中包含要在其中显示的数组

Javascript Create dynamic table with the arrays to be shown in it using For Loop

本文关键字：包含 在其中 显示 数组 For 使用 循环 创建 动态 Javascript      更新时间：2023-09-26

我已经创建了数组，并在单击提交按钮时进行了查看。下面是我编写的程序代码。但问题是，当 html 文件arrayusingforloop1.html被打开时，甚至在单击提交按钮之前就会显示一个小方桌。但是我只想显示提交按钮，而不是那个小表。然后，当单击"提交"按钮时，将显示带有表的数组。所以请给我解决方案。

代码 arrayusingforloop1.html：

<script>
    function array() {
        var table1 = "<table id='tabl123' ><thead></thead>";
        table1 += "<tr><label id='lb1'></label></tr><BR><tr><label id='lb2'></label></tr><BR><tr><label id='lb3'></label></tr><br><tr><label id='lb4'></label></tr><br><tr><label id='lb5'></label></tr><br><tr><label id='lb6'></label></tr><br><tr><label id='lb7'></label></tr><br><tr><label id='lb8'></label></tr><br><tr><label id='lb9'></label></tr><br><tr><label id='lb10'></label></tr></table>";
        var tablabc = document.getElementById("dynamic");
        tablabc.innerHTML = table1;


        arr = ["&nbspLee &nbsp", "22", "cse"];
        text = "";
        var i;
        for (i = 0; i < arr.length; i++) {
            text += " " + arr[i] + " ";
        }
        document.getElementById("lb1").innerHTML = text;

        arr1 = ["&nbspram       &nbsp", "22", "cse"];
        text1 = "";
        var a;
        for (a = 0; a < arr1.length; a++) {
            text1 += " " + arr1[a] + " ";
        }
        document.getElementById("lb2").innerHTML = text1;

        arr2 = ["&nbspmei       &nbsp", "22", "cse"];
        text2 = "";
        var c;
        for (c = 0; c < arr2.length; c++) {
            text2 += " " + arr2[c] + " ";
        }
        document.getElementById("lb3").innerHTML = text2;

        arr3 = ["&nbspJas       &nbsp", "22", "cse"];
        text3 = "";
        var d;
        for (d = 0; d < arr3.length; d++) {
            text3 += " " + arr3[d] + " ";
        }
        document.getElementById("lb4").innerHTML = text3;

        arr4 = ["&nbspDpu    &nbsp", "22", "cse"];
        text4 = "";
        var e;
        for (e = 0; e < arr4.length; e++) {
            text4 += " " + arr4[e] + " ";
        }
        document.getElementById("lb5").innerHTML = text4;
        arr5 = ["&nbspBav      &nbsp", "21", "cse"];
        text5 = "";
        var f;
        for (f = 0; f < arr5.length; f++) {
            text5 += " " + arr5[f] + " ";
        }
        document.getElementById("lb6").innerHTML = text5;
        arr6 = ["&nbspjai          &nbsp", "22", "cse"];
        text6 = "";
        var g;
        for (g = 0; g < arr6.length; g++) {
            text6 += " " + arr6[g] + " ";
        }
        document.getElementById("lb7").innerHTML = text6;
        arr7 = ["&nbspVic       &nbsp", "22", "cse"];
        text7 = "";
        var h;
        for (h = 0; h < arr5.length; h++) {
            text7 += " " + arr7[h] + " ";
        }
        document.getElementById("lb8").innerHTML = text7;
        arr8 = ["&nbsplav       &nbsp", "22", "cse"];
        text8 = "";
        var j;
        for (j = 0; j < arr8.length; j++) {
            text8 += " " + arr8[j] + " ";
        }
        document.getElementById("lb9").innerHTML = text8;
        arr9 = ["&nbspSid       &nbsp", "22", "cse"];
        text9 = "";
        var k;
        for (k = 0; k < arr5.length; k++) {
            text9 += " " + arr9[k] + " ";
        }
        document.getElementById("lb10").innerHTML = text9;

    }
</script>
</head>
<body>
    <style>
    #dynamic {
        padding: 15px;
        height: 50px;
        width: "100%";
        border-style: solid;
        border-width: 5px;
        background-color: yellow;
        color: red;
    }
    tr {
        border: 1px solid black;
        border-style: solid;
        border-width: 5px;
    }

    #tabl123 {
        padding: 15px;
        height: 50px;
        width: "100%";
        border: 1px solid black;
        border-style: solid;
        border-width: 5px;
        color: red;
    }
</style>
<table id="dynamic" border="1" />
<button onclick="array()">submit</button>

请给我解决方案。

一个简单的

解决方案是设置一个带有display:none到表的样式，并在"array（）"函数的末尾删除该样式。

演示

相关文章：