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'});
Similar Code Snippets:
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.