CODEWITHSUNDEEP
javascripthtmlarrays
Meiyappan Ramanathan
Meiyappan Ramanathan

Reputation: 19

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

I have created the arrays and have made it to view when submit button is clicked. The coming below is the program code that I have written. But the thing is when the html file arrayusingforloop1.html is opened, there is a small square table is shown even before clicking the Submit button.But I want to show only the submit button not that small table. Then, when Submit button is clicked the arrays with the table to be shown. So Please give me solution for that.

Code for 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>

Please give me solution for this.

Upvotes: 0

Views: 111

Answers (1)

Werner
Werner

Reputation: 2154

A simple solution would be to set a style with display:noneto the table and remove that style at the end of your "array()"-function.

Demo

Upvotes: 1

Related Questions