debrouchee/dynamicrows

jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)

dynamicrows

jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays).

---

Requirements

• jQuery >=2.0
• if move-action used: sortablejs (recommended) or jQuery UI

---

Installation

npm:

npm install dynamicrows --save

Bower (deprecated):

bower install debrouchee/dynamicrows --save

Or download js/dynamicrows.min.js and include the script on your page like shown below.

---

Usage

ECMAScript:

require('dynamicrows');

or direct include script:

<script src="dynamicrows.min.js"></script>

Markup example:

<table data-dynamicrows>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>E-Mail</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>

Initialize:

$(function() {
  $('table[data-dynamicrows]').dynamicrows(options);
});

Advanced markup example

<table data-dynamicrows data-increment=".increment" data-row=".row" data-form-prefix="contacts[874]">
  <thead>
    <tr>
      <th>Pos.</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>E-Mail</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td><span class="increment">1</span>.</td>
      <td><input type="text" name="contacts[874][0][firstname]"></td>
      <td><input type="text" name="contacts[874][0][lastname]"></td>
      <td><input type="text" name="contacts[874][0][email]"></td>
      <td><input type="date" name="contacts[874][0][date]" class="datepicker"></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>

Initialize:

$(function() {
  $('table[data-dynamicrows]').dynamicrows({
    beforeAdd: function($row) {
      let confirm_result = confirm('Möchten Sie wirklich eine neue Zeile hinzufügen?');
      if (!confirm_result) {
        return false;
      }
      $row.find('.datepicker').datepicker('remove');
    },
    afterAdd: function($row) {
      $row.find('.datepicker').datepicker();
    }
  });
});

---

Options

Option	Default	Description
row	tr	row selector
rows	tbody	rows-container selector
minrows	1	minimum of rows
copy_row	null	row selector for template-row
copy_values	false	if true input-values are copied
increment	null	selector for placing row numbering
handle_add	[data-add]	selector for adding new row
handle_remove	[data-remove]	selector for removing row
handle_move	[data-move]	selector for moving row
index_start	0	starting index for input array names
form_prefix	``	prefix of input-elements to be ignored in updateFormNames()
prevent_renaming	false	prevent auto-renaming of input-elements
animation	false	use jQuery animation method (fade)
animation_speed	300	animation speed in milliseconds
beforeAdd	null	callback function
beforeRemove	null	callback function
beforeFormUpdateNames	null	callback function
beforeAll	null	callback function
beforeMove	null	callback function
afterAdd	null	callback function
afterRemove	null	callback function
afterMove	null	callback function
afterFormUpdateNames	null	callback function
afterAll	null	callback function

---