This time I will share jQuery Plugin and tutorial about Duplicate & Remove Table Rows With jQuery – patuta-js, hope it will help you in programming stack.
| File Size: | 14.9 KB |
|---|---|
| Views Total: | 832 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
patuta-js is a super tiny table manipulation jQuery plugin created to duplicate and remove rows in an HTML table.
Supports nested table rows and dead simple to use.
How to use it:
1. Load the patuta.min.js script after jQuery library.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/patuta.min.js"></script> |
2. Initialize the plugin and we’re ready to go.
1 |
$(function(){ |
2 |
$('body').patuta(); |
3 |
}); |
3. Wrap your HTML table into a container element with the CSS class of ‘add-remove-tbl’.
1 |
<div class="add-remove-tbl"> |
2 |
<table> |
3 |
... |
4 |
</table> |
5 |
</div> |
4. Add removeRowBtn and addRowBtn classes to Remove & Add buttons. That’s it.
01 |
<div class="add-remove-tbl"> |
02 |
<table> |
03 |
<thead> |
04 |
<tr> |
05 |
<th>Name</th> |
06 |
<th>Designation</th> |
07 |
<th>Action</th> |
08 |
</tr> |
09 |
</thead> |
10 |
<tbody> |
11 |
<tr> |
12 |
<td>jQueryScript</td> |
13 |
<td class="add-remove-tbl"> |
14 |
<table class="nested"> |
15 |
<thead> |
16 |
<tr> |
17 |
<th>Col 1</th> |
18 |
<th>Col 2</th> |
19 |
<th>Action</th> |
20 |
</tr> |
21 |
</thead> |
22 |
<tbody> |
23 |
<tr> |
24 |
<td>25</td> |
25 |
<td>50</td> |
26 |
<td> |
27 |
<button class="removeRowBtn">Remove</button> |
28 |
</td> |
29 |
</tr> |
30 |
</tbody> |
31 |
</table> |
32 |
<button type="button" class="addRowBtn">Add Row</button> |
33 |
</td> |
34 |
<td> |
35 |
<button class="removeRowBtn">Remove</button> |
36 |
</td> |
37 |
</tr> |
38 |
</tbody> |
39 |
</table> |
40 |
<button type="button" class="addRowBtn">Add Row</button> |
41 |
</div> |
This awesome jQuery plugin is developed by dheerajvermawd. For more Advanced Usages, please check the demo page or visit the official website.
