How To Add Data In HTML Table Dynamically Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to add data in HTML table dynamically using JavaScript, reads input from user after submission entered value added to the html table using JavaScript.
JavaScript is used by programmers across the world to create dynamic and interactive web content like applications and browsers and it is a client-side programming language.
Step By Step Guide On How To Add Data In HTML Table Dynamically Using JavaScript :-
In html we created input field for reads user input and input button type defined for submission.
When user after entered input clicks button it loads load() function by using ‘onclick’ event. In <script> we collects the user input value and append to html table using DOM objects.
Document Object Model (DOM) that allows javascript to manipulate a website being displayed.
Specifically it allows reading and replacing everything within a given DOM element (html tag).Then the result will table with ‘null’ text changed to user input value.
<!DOCTYPE html>
<html>
<head>
<title>dynamically add value to html table</title>
</head>
<body>
<p>Entering value added to table second column</p>
<input type="text" id="inp">
<input type="submit" onclick="load()" value="SUBMIT">
<br><br><br>
<table border="1px solid black">
<tr><td>null<td id="n1">null</td></tr>
</table>
<script>
function load(){
document.getElementById('n1').innerHTML=document.getElementById('inp').value;
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those 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 your 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.
- <p> tag gives description for user, <input> tag with id ‘inp’ for getting input from user and <input> tag with type ‘submit’ act as a button. When button clicks onclick event triggers load() function executed.
- <br> tag used for break the lines. Created one table with one row and two columns with ‘null’ value. In <table> tag border=”1px solid black” defines border=”border-width-size border-style border-color”.
- In <script> tag function load() defined, document.getElementById('inp').value line collects the value of input field and document.getElementById('n1').innerHTML line replacing value of table column with id ‘n1’ to user entered value by DOM property of innerHTML.
- Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then</html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to add data in HTML table dynamically using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are able to know how to add data to html table dynamically using javascript.
Here we learned how to handle DOM elements and events in javascript.
Dynamic in sense its interact with user then result will displaying on webpages and input value also gets changed by users around the world. I hope this guidance will helpful for everyone.
About Anjali
