jQuery plugin to add/remove rows by cloning existing rows/renaming form elements. Dynamicrows is a small jQuery extension that makes it possible to clone and remove any object in a table row with just one click.
Key Features:
- Allows reproducing values typed into form fields.
- Allows table rows to fade in / out when adding/removing.
- Callback functions on add / remove / move / update.
Iterable Form Fields With Add/Remove jQuery Repeater Plugin
How to make use of it:
1. Download and load the dynamicrows.min.js
after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/dynamicrows.js"></script>
2. Load the jQuery UI library (sortable widget) for those who want the sortable performance.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
3. Add clone/take away buttons and drag deal with to your HTML table as follows:
<table data-dynamicrows> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>E-Mail</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="contacts[0][firstname]"></td> <td><input type="text" name="contacts[0][lastname]"></td> <td><input type="text" name="contacts[0][email]"></td> <td> <i class="fa fa-minus" data-remove></i> <i class="fa fa-arrows" data-move></i> <i class="fa fa-plus" data-add></i> </td> </tr> </tbody> </table>
4. Attach the function dynamicrows()
to the HTML table.
$(function() { $('[data-dynamicrows]').dynamicrows(); });
5. Customize the plugin by overriding the default configs as proven 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, // 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 });
6. Callback features.
$('[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, });
jQuery Plugin To Duplicate & Resort Table Rows, Dynamic Rows Plugin/Github
See Demo And Download
Official Website(debrouchee): Click Here
This superior jQuery/javascript plugin is developed by debrouchee. For extra Advanced Usages, please go to the official website.
Be First to Comment