Duplicate and Resort Table Rows using jQuery

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
      
E-Mail
      
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, 
});