Create Table Data Dynamically Using Javascript

With Below Script you can dynamically create table and add some data into it using Javascript Code.



<!DOCTYPE html>
<html>
<head>
    <title>HTML dynamic table using JavaScript</title>
    <script type="text/javascript">
    function addTable() {
        var myTableDiv = document.getElementById("myDynamicTable");
        var table = document.createElement('TABLE');
        table.border='1';
        
        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);
        
        for (var i=0; i<3; i++){
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            
            for (var j=0; j<4; j++){
                var td = document.createElement('TD');
                td.width='75';
                td.appendChild(document.createTextNode("Cell " + i + "," + j));
                tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
        }
    </script>
</head>
<body>
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div>
</body>
</html>

Post a Comment

0 Comments