Dynamically Add and Remove HTML Table Rows using jQuery

Submitted by oretnom23 on Tuesday, August 16, 2022 - 16:25.

This tutorial will help you to learn How to Dynamically Add and Remove HTML Table Rows using JavaScript and jQuery. This front-end feature is commonly used for iterated data to be saved on the database. This feature gives the end-users a better experience while using your developed app or website. User can simply add and remove HTML Table Rows without leaving the current page or refreshing/reloading the page.

I have created a simple application source code that demonstrates a simple way that meets our goal for this tutorial. The source code uses a Bootstrap v5 Framework for the design of the page and loads the jQuery Libray to run jquery scripts.

Creating the Interface

Below is the HTML Code containing the HTML Elements that are needed for this tutorial app such as the Table and buttons.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamically Add and Remove Table Row</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</head>
 
<body>
    <div class="container">
        <h1 class="text-center">Dynamically Add and Remove HTML Table Row</h1>
        <hr>
        <table class="table table-bordered" id="mytable">
            <colgroup>
                <col width="10%">
                <col width="45%">
                <col width="45%">
            </colgroup>
            <thead>
                <tr>
                    <th class="text-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="SelectAll">
                            <label class="form-check-label" for="SelectAll">
                              Select All
                            </label>
                        </div>
                    </th>
                    <th class="text-center">Column 1</th>
                    <th class="text-center">Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="">
                        <div class="form-check text-center">
                            <input class="form-check-input row-item" type="checkbox">
                        </div>
                    </td>
                    <td>12345678</td>
                    <td>12345678</td>
                </tr>
            </tbody>
        </table>
        <button class="btn btn-primary btn-sm rounded-0" id="add_row" type="button">Add Row</button>
        <button class="btn btn-danger btn-sm rounded-0" id="delete_selected" type="button">Delete Selected</button>
    </div>
</body>
</html>

The code above outputs a simple web page that contains a simple Table with 3 columns. The first column of the table contains a checkbox which will be use to identify the row item of the table to remove. The main purpose of the checkbox is to remove multiple HTML Table row at once. The table also contains a Select/Deselect All checkbox to check/uncheck the table rows at once.

The Main Script

The code below is a JavaScript code which executes the functionalities of the Buttons and Checkboxes on the HTML.

$(document).ready(function() {
 
 
    // Add Table Row
 
    $('#add_row').click(function() {
        // Sample Data
        var rand = Math.floor((Math.random() * 10) + 1);
 
        var tr = $("<tr>")
        tr.append("<td><div class='form-check text-center'><input class='form-check-input row-item' type='checkbox'></div></td>")
        tr.append(`<td>${rand}</td>`)
        tr.append(`<td>${rand}</td>`)
        $('#mytable tbody').append(tr)
 
        // Row Item Change Event Listener
 
        $('tr').find('.row-item').change(function() {
            if ($(".row-item").length == $(".row-item:checked").length) {
                $('#SelectAll').prop('checked', true)
            } else {
                $('#SelectAll').prop('checked', false)
            }
        })
    })
 
    // Remove Selected Table Row(s)
    $('#delete_selected').click(function() {
        var count = $('.row-item:checked').length
        if (count <= 0) {
            alert("Please select at least 1 table row to remove first.")
        } else {
            $('.row-item:checked').closest('tr').remove()
        }
    })
 
    // Select All
 
    $('#SelectAll').change(function() {
        if ($(this).is(':checked') == true) {
            $('.row-item').prop("checked", true)
        } else {
            $('.row-item').prop("checked", false)
 
        }
    })
 
    // Row Item Change Event Listener
 
    $('.row-item').change(function() {
        if ($(".row-item").length == $(".row-item:checked").length) {
            $('#SelectAll').prop('checked', true)
        } else {
            $('#SelectAll').prop('checked', false)
        }
    })
})

The script above exutes the following:

Add New Row on the Table
Select/Deselect all items to remove
Remove Selected Table Row(s) Items

The source code above also contains a simple script for return a message when Remove button been clicked without selected Table Row

Complete Code

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamically Add and Remove Table Row</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</head>
 
<body>
    <div class="container">
        <h1 class="text-center">Dynamically Add and Remove HTML Table Row</h1>
        <hr>
        <table class="table table-bordered" id="mytable">
            <colgroup>
                <col width="10%">
                <col width="45%">
                <col width="45%">
            </colgroup>
            <thead>
                <tr>
                    <th class="text-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="SelectAll">
                            <label class="form-check-label" for="SelectAll">
                              Select All
                            </label>
                        </div>
                    </th>
                    <th class="text-center">Column 1</th>
                    <th class="text-center">Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="">
                        <div class="form-check text-center">
                            <input class="form-check-input row-item" type="checkbox">
                        </div>
                    </td>
                    <td>12345678</td>
                    <td>12345678</td>
                </tr>
            </tbody>
        </table>
        <button class="btn btn-primary btn-sm rounded-0" id="add_row" type="button">Add Row</button>
        <button class="btn btn-danger btn-sm rounded-0" id="delete_selected" type="button">Delete Selected</button>
    </div>
</body>
 
<script>
    $(document).ready(function() {
 
 
        // Add Table Row
 
        $('#add_row').click(function() {
            // Sample Data
            var rand = Math.floor((Math.random() * 10) + 1);
 
            var tr = $("<tr>")
            tr.append("<td><div class='form-check text-center'><input class='form-check-input row-item' type='checkbox'></div></td>")
            tr.append(`<td>${rand}</td>`)
            tr.append(`<td>${rand}</td>`)
            $('#mytable tbody').append(tr)
 
            // Row Item Change Event Listener
 
            $('tr').find('.row-item').change(function() {
                if ($(".row-item").length == $(".row-item:checked").length) {
                    $('#SelectAll').prop('checked', true)
                } else {
                    $('#SelectAll').prop('checked', false)
                }
            })
        })
 
        // Remove Selected Table Row(s)
        $('#delete_selected').click(function() {
            var count = $('.row-item:checked').length
            if (count <= 0) {
                alert("Please select at least 1 table row to remove first.")
            } else {
                $('.row-item:checked').closest('tr').remove()
            }
        })
 
        // Select All
 
        $('#SelectAll').change(function() {
            if ($(this).is(':checked') == true) {
                $('.row-item').prop("checked", true)
            } else {
                $('.row-item').prop("checked", false)
 
            }
        })
 
        // Row Item Change Event Listener
 
        $('.row-item').change(function() {
            if ($(".row-item").length == $(".row-item:checked").length) {
                $('#SelectAll').prop('checked', true)
            } else {
                $('#SelectAll').prop('checked', false)
            }
        })
    })
</script>
 
</html>

DEMO VIDEO

That's it! Now you can test the source code on your end and see if it meets our goal for this tutorial. I hope this will help you with what you are looking for and for your future Web Application Projects.

Explore more on this website for more Tutorials and Source Codes.

Happy Coding :)

Add new comment

1735 views