Introduction
This tutorial will help you learn how to dynamically add and remove HTML table rows using JavaScript and jQuery. This front-end function is often used to store iterative data in a database. This feature will improve the end user’s experience when using the developed app and his website. Users can easily add and remove rows in HTML tables without leaving the current page or refreshing/reloading the page. We have created a simple application source code that demonstrates an easy way to achieve the goals of this tutorial. The source code uses the Bootstrap v5 framework for page design, loads the jQuery library, and runs jQuery scripts.
Make the Interface
Below is the HTML code containing the required HTML elements for this tutorial app. Tables 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/bootstrap@5.2.0/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/bootstrap@5.2.0/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 containing a simple table with three columns. The first column of the table contains check boxes that identify the row elements of the table to be deleted. The main purpose of checkboxes is to remove multiple HTML table rows at once. The table also includes a Select/Deselect All check box to enable/disable table rows at once.
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/bootstrap@5.2.0/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/bootstrap@5.2.0/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>that’s it! Now you can test the page’s source code to see if it meets the goals of this tutorial. I hope this helps in your search and future web application projects.
See this site for more tutorials and source code.
