Skip to main content

Insert Table Row Using JavaScript

Screenshot
Body

In this article we will create Insert Table Row using JavaScript. The program will dynamically create and insert a row in a HTML table. The trick of this code is to bind the form value as an id then create a table element using dot notation createElement(). To learn more about this, just follow the steps below.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

  1. <br />
  2. <!DOCTYPE hmtl><br />
  3. <html lang="en"><br />
  4. <head><br />
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/><br />
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><br />
  7. </head><br />
  8. <body><br />
  9. <nav class="navbar navbar-default"><br />
  10. <div class="container-fluid"><br />
  11. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a><br />
  12. </div><br />
  13. </nav><br />
  14. <div class="col-md-3"></div><br />
  15. <div class="col-md-6 well"><br />
  16. <h3 class="text-primary">Insert Table Row Using JavaScript</h3><br />
  17. <hr style="border-top:1px dotted #ccc;"/><br />
  18. <div class="col-md-8"><br />
  19. <table class="table table-bordered"><br />
  20. <thead class="alert-info"><br />
  21. <tr><br />
  22. <th>Firstname</th><br />
  23. <th>Lastname</th><br />
  24. </tr><br />
  25. </thead><br />
  26. <tbody id="result"><br />
  27. <tr><td>John</td><td>Smith</td></tr><br />
  28. </tbody><br />
  29. </table><br />
  30. </div><br />
  31. <div class="col-md-4"><br />
  32. <form><br />
  33. <div class="form-group"><br />
  34. <label>Firstname</label><br />
  35. <input type="text" id="firstname" class="form-control" /><br />
  36. </div><br />
  37. <div class="form-group"><br />
  38. <label>Lastname</label><br />
  39. <input type="text" id="lastname" class="form-control" /><br />
  40. </div><br />
  41. <center><button type="button" class="btn btn-primary" onclick="insertRow();">Insert row</button></center><br />
  42. </form><br />
  43. </div><br />
  44. </div><br />
  45. <script src="js/script.js"></script><br />
  46. </body><br />
  47. </html><br />

Creating the Script

This code contains the script of the application. The code will dynamically insert a new row. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.

  1. <br />
  2. function insertRow(){<br />
  3. var firstname=document.getElementById('firstname').value;<br />
  4. var lastname=document.getElementById('lastname').value;</p>
  5. <p> if(firstname =="" || lastname ==""){<br />
  6. alert("Please enter something first!");<br />
  7. }else{<br />
  8. var parent=document.createElement('tr');<br />
  9. var col1=document.createElement('td');<br />
  10. var col2=document.createElement('td');<br />
  11. var text1=document.createTextNode(firstname);<br />
  12. var text2=document.createTextNode(lastname);<br />
  13. col1.appendChild(text1);<br />
  14. col2.appendChild(text2);<br />
  15. parent.appendChild(col1);<br />
  16. parent.appendChild(col2);</p>
  17. <p> document.getElementById('result').appendChild(parent);</p>
  18. <p> document.getElementById('firstname').value="";<br />
  19. document.getElementById('lastname').value="";<br />
  20. }</p>
  21. <p>}<br />

There you have it we successfully created a Insert Table Row using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment