
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.
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>
This awesome jQuery plugin is developed by risul3. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 05.04.2019
- Source