Insert Table Row Using JavaScript

Submitted by razormist on Thursday, July 23, 2020 - 22:57.

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.

<!DOCTYPE hmtl>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">Insert Table Row Using JavaScript</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-8">
                        <table class="table table-bordered">
                                <thead class="alert-info">
                                        <tr>
                                                <th>Firstname</th>
                                                <th>Lastname</th>
                                        </tr>
                                </thead>
                                <tbody id="result">
                                        <tr><td>John</td><td>Smith</td></tr>
                                </tbody>
                        </table>
                </div>
                <div class="col-md-4">
                        <form>
                                <div class="form-group">
                                        <label>Firstname</label>
                                        <input type="text" id="firstname" class="form-control" />
                                </div>
                                <div class="form-group">
                                        <label>Lastname</label>
                                        <input type="text" id="lastname" class="form-control" />
                                </div>
                                <center><button type="button" class="btn btn-primary" onclick="insertRow();">Insert row</button></center>
                        </form>
                </div>
        </div>
<script src="js/script.js"></script>    
</body> 
</html>

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.

function insertRow(){
        var firstname=document.getElementById('firstname').value;
        var lastname=document.getElementById('lastname').value;
 
        if(firstname =="" || lastname ==""){
                alert("Please enter something first!");
        }else{
                var parent=document.createElement('tr');
                var col1=document.createElement('td');
                var col2=document.createElement('td');
                var text1=document.createTextNode(firstname);
                var text2=document.createTextNode(lastname);
                col1.appendChild(text1);
                col2.appendChild(text2);
                parent.appendChild(col1);
                parent.appendChild(col2);
 
                document.getElementById('result').appendChild(parent);
 
                document.getElementById('firstname').value="";
                document.getElementById('lastname').value="";
        }
 
}

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

495 views