Create Dynamic Table In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of create dynamic table in JavaScript, here we gets row count from user for generate row dynamically depends on user input count.
We needs to create elements of ‘table,tr,th,td’ for creating table.
We know for create table we need ‘table,header,row,columns’ so we created element of table, row ‘tr’, table header ‘th’ and we appended heading into ‘th’ by innerHTML.
Now we have to adds every element with each other by appendChild() method then we finally we needs to add table to body of webpage.
Step By Step Guide On Create Dynamic Table In JavaScript :-
Here we defined h1 tag with heading text, input tag for collect row count from user and button ‘Create Dynamic Table’ created with onclick event for generate ‘ctbl()’ function.
In script we defined function ‘ctbl()’ there variable ‘v’ defined for store row count, created table elements ‘table,th,tr,td’ one by one by ‘createElement()’ method and for insert text into table columns ‘td’ by ‘createTextNode()’.
Now we have to add columns of ‘th,td’ and adds columns to the table row ‘tr’ and needs to add that ‘tr’ to table ‘table’ then we needs to add whole table to body of webpage by appendChild() method.
<!DOCTYPE html>
<html>
<head>
<title>CREATE TABLE USING JAVASCRIPT</title>
</head>
<body>
<h1>CREATE TABLE DYNAMICALLY</h1>
<input type="text" id="rc" placeholder="Enter Row Count">
<button onclick="ctbl()">Create Dynamic Table</button>
<script>
function ctbl(){
var v=document.getElementById('rc').value;
let tbl=document.createElement('table');
let hrow=document.createElement('tr');
var arr=['NAME','MARKS'];
tbl.border=1;
for(var i=0;i<arr.length;i++){
let thead=document.createElement('th');
var txt=document.createTextNode(arr[i]);
thead.appendChild(txt);
hrow.appendChild(thead);
}
tbl.appendChild(hrow);
for(var j=0;j<v;j++){
let tr=document.createElement('tr');
let td1=document.createElement('td');
let td2=document.createElement('td');
var txt1=document.createTextNode('Col 1');
var txt2=document.createTextNode('Col 2');
td1.appendChild(txt1);
td2.appendChild(txt2);
tr.appendChild(td1);
tr.appendChild(td2);
tbl.appendChild(tr);
}
document.body.appendChild(tbl);
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h1 tag with heading text ‘CREATE TABLE DYNAMICALLY’, input tag ‘rc’ for collect row count from user dynamically and button ‘Create Dynamic Table’ defined for load ‘ctbl()’ method by onclick event.
- In script we defined function ctbl() method, here variable ‘v’ defined for store input field ‘rc’ value. Variable ‘tbl’ for store created element ‘table’.
- For header row we created ‘tr’ element and stored on variable ‘hrow’ and array variable ‘arr’ defined with ‘['NAME','MARKS']’ values then ‘border’ property we adds into variable ‘tbl’ for sets table border to ‘1’.
- Using for loop we generating table header ‘th’ stored on variable ‘thead’ till array values length and then creating text node with array ‘arr’ string values ‘['NAME','MARKS']’ stored on variable ‘txt’.
- The ‘txt’ appended on ‘thead’ table header and we appended ‘thead’ on header row ‘hrow’ by appendChild(). Using another for loop we have to doing the same as above then we created elements ‘tr,td’.
- We created text node with texts ‘Col 1, Col 2’ then stored on respective variables ‘txt1,txt2’ and appending them on respective columns ‘td1,td2’ and columns added on row ‘tr’ then row ‘tr’ added on table ‘tbl’ by appendChild().
- Finally we appended whole table ‘tbl’ on body of html webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create table in dynamically using JavaScript.
When we executes program on browser we can see heading, input box for user row count, button ‘Create Dynamic Table’.
Users need to fill row count input field then row will added to table till row count with texts ‘Col 1, Col 2’ but user not provide any input of row count then table header row only will appear so don’t forget to leave as empty input field.
I hope this tutorial on create dynamic table in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
