Article

Create Dynamic Tables in HTML Using Javascript

18 Jun 2015 Kamal Pratap
0 Comments 2798 Views



Here we explain how to create html table using javascript at runtime. We generate a tale on button click using javascript array.

HTML Code :

<html lang="en">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function CreateTable() {
            var employee = new Array();
            employee.push(["Employee Id", "Name", "Country"]);
            employee.push([1, "Harish Kumar", "United States"]);
            employee.push([2, "Pankaj Mohan", "India"]);
            employee.push([3, "Nitin Srivastav", "France"]);
            employee.push([4, "Ramchandra Verma", "Russia"]);

            var tablecontents = "";
            tablecontents = "<table border='1'>";

            for (var i = 0; i < employee.length; i++) {
                tablecontents += "<tr>";
                for (var j = 0; j < employee[i].length; j++) {

                    tablecontents += "<td>" + employee[i][j] + "</td>";
                }

                tablecontents += "</tr>";
            }
            tablecontents += "</table>";
            document.getElementById("table").innerHTML = tablecontents;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        Click Here to Generate Table</h1>
    <input type="button" value="Generate Table" onclick="CreateTable()" />
    <p id="table">
    </p>
    </form>
</body>
</html>

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment