Add Insert Remove Delete Table Rows dynamically using jQuery

In this article I will explain with an example, how to add (insert) / remove (delete) HTML Table Rows dynamically using jQuery.

A new row will be added (inserted) using TextBoxes in Footer row in the HTML Table while a row will be removed (deleted) using a Remove button within the HTML Table row using jQuery.

HTML Markup

The following HTML markup consists of an HTML Table with the following elements:

1. THEAD – The Header row.

2. TBODY – Left empty for dynamically adding (inserting) rows to the HTML Table.

3. TFOOT – The footer row, consisting of two TextBoxes and a Button for dynamically adding (inserting) rows to the HTML Table.

<head>

</head>

<body>

$(function () {

//Build an array containing Customer records.

var customers = new Array();

customers.push(["John Hammond", "United States"]);

customers.push(["Mudassar Khan", "India"]);

customers.push(["Suzanne Mathews", "France"]);

customers.push(["Robert Schidner", "Russia"]);

//Add the data rows.

for (var i = 0; i < customers.length; i++) {

AddRow(customers[i][0], customers[i][1]);

}

});

function Add() {

AddRow($("#txtName").val(), $("#txtCountry").val());

$("#txtName").val("");

$("#txtCountry").val("");

};

function AddRow(name, country) {

//Get the reference of the Table's TBODY element.

var tBody = $("#tblCustomers > TBODY")[0];

//Add Row.

row = tBody.insertRow(-1);

//Add Name cell.

var cell = $(row.insertCell(-1));

cell.html(name);

//Add Country cell.

cell = $(row.insertCell(-1));

cell.html(country);

//Add Button cell.

cell = $(row.insertCell(-1));

var btnRemove = $("<input />");

btnRemove.attr("type", "button");

btnRemove.attr("onclick", "Remove(this);");

btnRemove.val("Remove");

cell.append(btnRemove);

};

function Remove(button) {

//Determine the reference of the Row using the Button.

var row = $(button).closest("TR");

var name = $("TD", row).eq(0).html();

if (confirm("Do you want to delete: " + name)) {

//Get the reference of the Table.

var table = $("#tblCustomers")[0];

//Delete the Table row using it's Index.

table.deleteRow(row[0].rowIndex);

}

};

</script>

<thead>

<tr>

<th>Country</th>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

Explanation

Data Array

Inside the jQuery document ready event handler, an Array is created which will contain the cell values of each HTML Table row.

A loop is executed over the Array items and one by one a HTML Table row is appended to the HTML Table using the AddRow method.

AddRow method

This method accepts the Name and Country values as parameter. First the reference of the TBODY element of the HTML Table is fetched and then a new HTML Table row is generated and inserted into the TBODY element of the HTML Table using the JavaScript insertRow method.

Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.

Once the HTML Table row is created, three cells are added to it using the JavaScript insertCell method.

Table Row insertCell Method: This method adds a new cell to a Table Row at the specified index. If the index is supplied as -1 then the cell will be added at the last position.

The first two cells are for the Name and Country values respectively while the third cell has a HTML Button which will be used for removing (deleting) the HTML Table row.

Adding a new row

When Add button in the Footer row of the HTML Table is clicked, it calls the Add method. The Add method fetches the value of the Name and Country from their respective TextBoxes and then calls the AddRow method, which ultimately adds (inserts) a new row to the HTML Table.

Removing a row

When the Remove button in any row of the HTML Table is clicked, it calls the Remove method which accepts the reference of the Remove button as parameter.

Inside the Remove method, first the reference of the HTML Table row to be removed (deleted) is determined using the reference of the Remove button.

Then using the reference of the HTML Table row, the value of the Name cell is determined and a JavaScript Confirmation Box is displayed.

If the Confirmation Box response is YES, then the HTML Table row is removed (deleted) using its RowIndex with the help of JavaScript deleteRow method.

Table deleteRow Method: This method deletes a Table Row at the specified index.

Screenshot