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

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

转载作者：行者123 更新时间：2023-12-03 10:57:28

我已经创建了数组，并使其在单击提交按钮时可以查看。下面是我写的程序代码。但问题是，当打开 html 文件 arrayusingforloop1.html 时，即使在单击“提交”按钮之前也会显示一个小方 table 。但我只想显示提交按钮而不是那个小表格。然后，当单击“提交”按钮时，将显示带有表格的数组。所以请给我解决方案。

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>