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 : '[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]'});
Similar Code Snippets:
Custom Select Dropdown CSS Only
Live Markdown Editor With Preview Using Codemirror JS
Custom Select Dropdown in Vanilla JS
JavaScript Random Password Generator
Highlight Text to Specific Range in JavaScript
Convert Digits into Words with JavaScript / jQuery
Textarea Copy To Clipboard Button
jQuery Currency Format Comma Separator on Input
Flight Reservation Form HTML Code
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.