Add/Remove DOM Items With Renaming Form Elements | dynamicrows

Add-Remove-DOM-dynamicrows

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.

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.