网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一个小型的jQuery表格插件,只需单击一下,就可以克隆和删除表行中的任何元素。还提供了一个拖放排序的功能。需要加载jQuery UI排序插件。
1. 在页面中加载jQuery库和表格克隆插件文件。
<script src="jquery.min.js"></script>
<script src="dynamicrows.js"></script>
2. 如果需要可排序功能,请加载jqueryui库(可排序插件)。
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>
3. 添加复制/删除按钮,如下所示:
<table data-dynamicrows>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>E-Mail</th>
<th>Actions</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>
4. 初始化表格插件。
$(function() {
$('[data-dynamicrows]').dynamicrows();
});
5. 通过覆盖默认配置自定义插件,如下所示:
$('[data-dynamicrows]').dynamicrows({
// CSS selector of table row
row: 'tr',
// CSS selector of tbody
rows: 'tbody',
// minimum number of table rows
minrows: 1,
// custom template while cloning
copyRow : null,
// clone form values
copyValues: false,
// element to hold row numbering
increment : null,
// prefix for form element that is ignored when the names are updated
form_prefix: '',
// prevent renaming form elements
prevent_renaming : false,
// add/remove/sort attributes
handle_add: '[data-add]:not(.disabled)',
handle_remove: '[data-remove]:not(.disabled)',
handle_move: '[data-move]:not(.disabled)',
// start index
index_start: 0,
// enable fade animation
animation: false, // 'fade'
animation_speed: 300
});
6. 回调方法。
$('[data-dynamicrows]').dynamicrows({
// parameter: $row
beforeAdd: null,
beforeRemove: null,
beforeMove: null,
beforeFormUpdateNames: null,
beforeAll: null,
afterAdd: null,
afterRemove: null,
afterMove: null,
afterFormUpdateNames: null,
afterAll: null,
});
转载请注明来源:可添加、删减、排序的jQuery表格插件
本文永久链接地址:https://www.moyouyouw.cn/code/908.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论