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

Related tags

Learning resource dynamicrows
Overview

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
You might also like...

Form To CSS - jQuery-Plugin form to CSS generator

Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Sep 26, 2021

Best dialogue for file creation, renaming, opening, deletion or jumping to a specific line

Best dialogue for file creation, renaming, opening, deletion or jumping to a specific line

Features No need to rely on vscode.quickOpen Create, rename, delete, open files/folders without relying on the sidebar Jump to specific lines Find spe

Jul 31, 2022

Rename image after pasting, support name pattern and auto renaming.

Rename image after pasting, support name pattern and auto renaming.

Obsidian paste image rename This plugin is inspired by Zettlr, Zettlr shows a prompt that allows the user to rename the image, this is a great help if

Jan 2, 2023

This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

AMAZON This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

Mar 23, 2022

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

Jun 14, 2022

A to-do list set up using webpack. It allows the user to add, remove, edit and check items on the list. All the data is saved in local storage.

Project Name: Webpack-Project: To-Do-List Description of the project: A simple to-do-list app created using webpack. Built With Major languages: HTML

Aug 5, 2022

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Nov 15, 2022

An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Oct 3, 2022

Add class(es) to DOM elements while waiting for async action. Promise or callback.

jquery.loading Add class(es) to DOM elements while waiting for async action. Promise or callback. Install The simplest way is to include loading.js in

Mar 26, 2022
Owner
Dennis Dohle
Dennis Dohle
GitHub
Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.

Awesome Books Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the

Didier Peran Ganthier 6 Dec 20, 2022
This is a basic app that allows user add/remove books from a list of books. It was created by using JavaScript arrays and objects to dynamically modify the DOM.

Awesome-Books This application lets you compile a dynamic collection of books using JavaScript. It is a single page app. You enter your book title & a

Jules Edozie 7 Oct 24, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

Zotero Obsidian Citations Adds colored tags to Zotero items that have associated Markdown notes stored in an external folder. Open an associated Markd

Dae 210 Jan 4, 2023
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022
A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.

jquery.serializeJSON Adds the method .serializeJSON() to jQuery to serializes a form into a JavaScript Object. Supports the same format for nested par

Mario Izquierdo 1.7k Dec 12, 2022