Duplicate and Resort Table Rows using jQuery
Dennis Dohle January 20, 2023
Dynamicrows is a small jQuery plugin that makes it possible to clone and remove any element (e.g. form fields) in a table row with just one click.
Also provides a functionality to resort the table rows with drag and drop. Requires jQuery UI sortable widget.
Dynamicrows jQuery plugin Features
- Allows clone values typed in the form fields
- Allows to fade in/out table rows on add/remove
- Callback functions on add/remove/move/update
Dynamicrows jQuery plugin Implementation
Download and load the dynamicrows.min.js after jQuery
Load the jQuery UI library (sortable widget) if you need the sortable functionality
Add clone/remove buttons and drag handle to your HTML table as follows
Firstname | Lastname | Actions | |
---|---|---|---|
Attach the function dynamicrows() to the HTML table. It's Done!!!
$(function() { $('[data-dynamicrows]').dynamicrows(); });
Customize the plugin by overriding the default configs as shown below
$('[data-dynamicrows]').dynamicrows({ // CSS selector of table row row: 'tr', // CSS selector of tbody rows: 'tbody', // minimum number of table rows minrows: 1, // custom template while cloning copyRow: null, // clone form values copyValues: false, // element to hold row numbering increment : null, // prefix for form element that is ignored when the names are updated form_prefix: '', // prevent renaming form elements prevent_renaming : false, // add/remove/sort attributes handle_add: '[data-add]:not(.disabled)', handle_remove: '[data-remove]:not(.disabled)', handle_move: '[data-move]:not(.disabled)', // start index index_start: 0, // enable fade animation animation: false, // 'fade' animation_speed: 300 });
Callback functions
$('[data-dynamicrows]').dynamicrows({ // parameter: $row beforeAdd: null, beforeRemove: null, beforeMove: null, beforeFormUpdateNames: null, beforeAll: null, afterAdd: null, afterRemove: null, afterMove: null, afterFormUpdateNames: null, afterAll: null, });
Next: Best tricks to improve SEO Ranking
Supported Devices
Chrome, IE8+, MS Edge, Firefox, Opera, Safari
Tags
dynamic form, data table, table sort, devstoc freebies, jquery plugins