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: 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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X