Dynamically Add/Remove Table Rows Using jQuery - rowfy

rowfy is a jQuery plugin that creates a new column containing Add/Subtract buttons in the html table. Your users are able to dynamically duplicate/remove table rows by clicking the +/- buttons.

Ideal for data table. Compatible with Bootstrap framework.

How to use it:

1. Link to jQuery JavaScript library and the rowfy.js plugin.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/rowfy.js"></script>

2. The plugin uses Bootstrap to style the Add/Subtract buttons.

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
      crossorigin="anonymous">

3. Just add the CSS class rowfy to your HTML table and the plugin will do the rest.

<table class="table rowfy">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Changelog:

2019-04-11

• JS update

---

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