Dynamically Add Remove Rows in HTML Table using jQuery

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Folium
Author:	Cem Özden
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	15.7 KB

Demo Download

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 : '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);
    });

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 : 'test@test.com', 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 : 'updated@mail.com'});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.