Responsive Form Table Plugin - jquery.manage.form.tables.js

manage.form.tables.js is a simple yet powered jQuery table manipulation plugin for creating dynamic form tables on your web application.

Form tables are commonly used in web applications where users need to input data into multiple fields at once, such as when filling out a survey or registering for an account. By presenting the inputs in a table format, it becomes easier for the user to see all the required inputs and input the necessary information in a structured manner. For example, in a table that displays customer information, each row might represent a different customer, with form inputs for the customer's name, address, phone number, and so on.

One of the critical features of this plugin is its ability to add and delete rows dynamically, making it easy to insert/remove table rows as needed. It also uses the jQuery Validation Engine plugin to validate row inputs, ensuring that all fields are valid and that your data is clean and accurate.

How to use it:

1. Load the needed jQuery library and Validation Engine plugin in the document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Validation Engine plugin -->
<link href="/path/to/cdn/validationEngine.jquery.min.css" rel="stylesheet"/>
<script src="/path/to/cdn/languages/jquery.validationEngine-en.min.js"></script>
<script src="/path/to/cdn/jquery.validationEngine.min.js"></script>

2. Load the manage.form.tables.js plugin's files.

<link href="src/jquery.manage.form.resposive-tables.css" rel="stylesheet"/>
<script src="src/jquery.manage.form.tables.js"></script>

3. Bootstrap 5 and Font Awesome Iconic Font were used on the plugin's example page to achieve rapid styling. OPTIONAL.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

4. Add an empty table to your form.

<form id="formID" method="post" action="#">
  <table class="table table-striped table-hover table-clone-row " >
    <thead>
      <tr>
        <th scope="col">
          <!-- Add Row Button -->
          <button class="btn btn-success add-row"><i class="fa fa-plus"></i></button>
        </th>
        <th scope="col">NAME</th>
        <th scope="col">EMAIL</th>
        <th scope="col">PHONE</th>
        <th scope="col">ACTIONS</th>
      </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
      <tr>
        <td colspan="5" class="text-center">
          <button class="btn btn-success sender">SEND FORM</button>
        </td>
      </tr>
    </tfoot>
  </table>
</form>

5. Create a template for row inputs as follows:

const template = `
  <tr role="row">
    <td role="cell" data-label="#i" >
      <a href="javascript:void(0);" class="btn btn-danger btn-sm remove">
        <i class="fa fa-times"></i>
      </a>
  </td>
  <td role="cell" data-label="Name">
    <input type="name" name="name[]" class="form-control" data-validation-engine="validate[required,custom[onlyLetterSp],maxSize[20]]"
      />
  </td>
  <td role="cell" data-label="Email">
    <input type="email" name="email[]"  class="form-control" data-validation-engine="validate[required,custom[email]]"
      />
  </td>
  <td role="cell" data-label="Phone">
    <input type="text" name="phone[]"  class="form-control" data-validation-engine="validate[required,custom[phone]]"
      />
  </td>
  <td role="cell" data-label="Actions">
    <a href="javascript:void(0);" class="btn btn-warning btn-sm lock">
      <i class="fa fa-unlock"></i>
    </a>
    <a href="javascript:void(0);" class="btn btn-success btn-sm edit">
      <i class="fa fa-edit"></i>
    </a>
   </td>
 </tr>
`;

6. Initialize the plugin on the form element.

$('.table-clone-row').manageFormTables({

  // row template
  templateRow: template,

  // selector of remove button
  removeRowTarget: '.remove',

  // selector of add button
  addRowTarget: '.add-row',

  // min number of visible rows
  minRowsVisible: 1,
  
  // selector of submit button
  senderTarget: '.sender',

  // form title
  tableFormTitle: 'Formulario',
  
  // regex
  indexRowPattern: /#i/g,
  
  // debug mode
  debug: 0,
  
  // callbacks
  onSubmit: function (form) {},
  onErrorRowsVisible(element, form) {},

});

7. Create custom actions in the events array.

$('.table-clone-row').manageFormTables({
  events:[
    {
      // lock button
      targetName: '.lock',
      eventName: 'click',
      onEvent: function () {
        const _this = $(this);
        const tr = _this.closest("tr");
        if (_this.hasClass('in-lock')) {
          tr.find('input').removeAttr('readonly').removeClass('disabled');
          tr.find('.remove').removeClass('disabled');
          _this.removeClass('in-lock btn-info').addClass('btn-warning');
          _this.html('<i class="fa fa-unlock"></i>');
        } else {
          tr.find('input').attr('readonly', true).addClass('disabled');
          _this.addClass('in-lock btn-info').removeClass('btn-warning');
          tr.find('.remove').addClass('disabled');
          _this.html('<i class="fa fa-lock"></i>');
        }
      }
    }
  ]
});

---

This awesome jQuery plugin is developed by w360co. For more Advanced Usages, please check the demo page or visit the official website.