Dynamically Add Remove Rows in HTML Table Using jQuery

With the help of “Folium” jQuery plugin, you are allowed to dynamically add remove rows in HTML table. It’s simple and easy to use and light-weight.

It has a built-in function to add a new row, edit row and update the data of the existing row. Furthermore, you can also delete the selected row.

One of its key function, it allows you to set the default data row which will auto-populate some data when the user adds a new row.

It’s a perfect solution if you are building an application where you want the user to add data in rows. You can offer your site users an easy to use interface and allow them to add important data.

In addition, the Folium plugin also allows sorting each row data in ascending and descending order. The pagination is another awesome feature which user can use to navigation to next lists of rows.

You can limit the number of rows per page and when user click on next, the plugin shows the next list of rows without loading the page.

It also indicates the total number of rows per page and the total number of pages (1-100 | Page: 1/10) which make user’s know how much data available on this particular page.

How to Create Dynamically Add Remove Rows in HTML Table

To get the start, you need to load the Javascript and stylesheet files. Also, don’t forget to add the main jQuery file. You need to add them in the head tag of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Folium JS -->
<script src="js/folium.js"></script>

<!-- Folium CSS -->
<link rel="stylesheet" href="css/folium.css">

After that, you need to create the HTML markup. As I said above, the plugin supports the pagination so let’s start with the markup of pagination.

We will simply define the wrapper and place the different buttons. We created a button for next, last and an input type text field which will show the total number of pages and rows.

<div class="foliumPageBar">
   <button id="foliumPagefirst" class="pageBarButton">First</button>
   <button class="pageBarButton" id="foliumPagePrevious"><</button>
   <input type="text" class="infoBox" value="1-100 | Page: 1/10" readonly />
   <button class="pageBarButton" id="foliumPageNext">></button>
   <button class="pageBarButton" id="foliumPageLast">Last</button>
</div>

Our next step to show the table rows dynamically. For this, we will simply call the table with an ID foliumTable and all the data will populate through the Javascript function which we will define later in this post.

<table id="foliumTable"></table>

Finally, we will add three buttons which help us to add, update and remove the row. Each button has a unique ID.

<button id="addRow">Add New Row</button>
<button id="updateRow">Update Row</button>
<button id="removeRow">Remove Row</button>

The Javascript

Finally, the most important part will start here. We need to define the number of columns, rows data and initialize the plugin.

You can easily ON/OFF the different functions such as pagination, search, sort table, edit table by setting the value true or false.

const tableSettings = {
    columns : [
                {columnId : "username", displayText  : "Username"},
                {columnId : "name", displayText  : "Name"},
                {columnId : "surname", displayText  : "Surname"},
                {columnId : "emailAddress", displayText  : "E-mail Address"},
                {columnId : "age", displayText  : "Age", sortingType : 'number'},
                {columnId : "phoneNumber", displayText  : "Phone Number"},
                {columnId : "nationality", displayText  : "Nationality"},
                {columnId : "location", displayText  : "Location"}
              ],
    rows: [
            {username: 'jsmith', name : "John", surname : "Smith", emailAddress : 'foo@bar.com', age : 30, phoneNumber : '+1 111 111 111', nationality : 'American', location : 'San Francisco/CA'},
            {username: 'jasmith', name : "Jane", surname : "Smith", emailAddress : '', age : 29, phoneNumber : '', nationality : '', location : ''},
          ],
    pagination : true,
    paginationStyle : "all",
    searching : true,
    sortable : true,
    editable : true,
    width: '1000px',
    cellRenderer : function(rowIndex, columnIndex, data, rowObject) {
        if (columnIndex === 0) 
          return `<a href="/link.html?id=${rowObject.username}">${data}</a>`;

        return data;
    }

};

$('#foliumTable').FoliumTable(tableSettings);

$('#addRow').click(function() {
  const foliumTable = $('#foliumTable').FoliumTable();

  foliumTable.addRow({username: 'test', name : "test", surname : "test", emailAddress : 'test@test.com', age : 50, phoneNumber : '+1 11 111 11 11', nationality : 'N/A', location : 'New York/NY'});
});

$('#updateRow').click(function() {
  const foliumTable = $('#foliumTable').FoliumTable();

  foliumTable.updateRow(1, {username: 'test', emailAddress : 'updated@mail.com'});
});

$('#removeRow').click(function() {
  const foliumTable = $('#foliumTable').FoliumTable();

  foliumTable.deleteRow(1);
});

Auto Populated Data

Of course, you love to have a function to auto-populate some default data when someone adds a new row, right? This plugin allows you to set the default values for each column. With the help of the following methods, you can easily do that.

foliumTable.addRow({username: 'test', name : "test", surname : "test", emailAddress : 'test@test.com', age : 50, phoneNumber : '+1 11 111 11 11', nationality : 'N/A', location : 'New York/NY'});

By using the following function you can allow users to delete the row.

foliumTable.deleteRow(1);

Similar you can update the existing row data by using this method.

foliumTable.updateRow(1, {username: 'test', emailAddress : 'updated@mail.com'});

That’s it. You can play with code and make it work as you want. It offers you a lot of functions which are easy to use.