Dynamically Add Remove Rows in HTML Table using jQuery

The “Folium” is a well designed and powerful jQuery plugin that lets you to dynamically add remove rows in HTML table. The plugin comes with built-in methods to add a new row, update data of existing row and delete selected row. In short, you can fully play with HTML table and its elements while JavaScript / jQuery coding.

Plugin Overview

Plugin: Folium
Author: Cem Ă–zden
Licence: MIT Licence
Published: September 11, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 15.7 KB

How to Use Dynamically Add Remove Rows in HTML Table Plugin

1. Load Folium‘s CSS and JavaScript file just after the jQuery 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">

2. Now, create a basic HTML structure that will contains a table and buttons to add and remove 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>
<table id="foliumTable"></table>
<button id="addRow">Add New Row</button>
<button id="updateRow">Update Row</button>
<button id="removeRow">Remove Row</button>

3. Finally, define columns and rows data in plugin configuration and initialize.

  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 : '[email protected]', 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 : '[email protected]', 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 : '[email protected]'});
    });

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

      foliumTable.deleteRow(1);
    });

The following are some jQuery plugin’s methods to dynamically add remove rows in HTML table.

4. To add table row dynamically.

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

5. To delete table row, pass the number of row in the following method.

foliumTable.deleteRow(1);

6. To update the data of existing row.

foliumTable.updateRow(1, {username: 'test', emailAddress : '[email protected]'});