Jquery HTML表格添加/删除行、更改名称并使其可排序
我正在尝试编写一个简单的脚本，使表能够执行以下操作：Jquery HTML表格添加/删除行、更改名称并使其可排序,jquery,html-table,rows,Jquery,Html Table,Rows,我正在尝试编写一个简单的脚本，使表能够执行以下操作： 添加/删除行 对行启用排序 每次添加行时，在每个字段的末尾添加一个额外的_数字 排序完成后，将行的排序顺序添加到隐藏字段中，以便我可以通过服务器上的CF模板来处理它，以创建记录 我试着搜索一个插件来实现这一点，但迄今为止没有运气 <!DOCTYPE html> <html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/jq
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="order">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="table-data">
<tr>
<td></td>
<td>First name</td>
<td>Last Name</td>
<td>Email</td>
<td>Options</td>
<td>Add</td>
<td>Remove</td>
</tr>
<tbody>
<tr class="tr_clone" id="listItem_123">
<td class="handle">+</td>
<td><input type="text" id="who" name="who" ></td>
<td><input type="text" id="location" name="location" ></td>
<td><input type="text" id="date_picker" name="start" class="datepicker"></td>
<td><select name="dave">
<option value="">Please Select</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
<td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("input.tr_clone_add").live('click', function() {
var counter = 0;
var max_rows = 5;
counter = $('.tr_clone').length;
if( parseInt(counter) < max_rows)
{
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
}
});
$("input.tr_clone_remove").live('click', function() {
$(this).closest("tr").remove();
});
$( "#table-data tbody" ).sortable({
handle : '.handle',
items : 'tr',
update : function(){
var order = $("#table-data").sortable();
}
});
});
</script>
<style>
#table-data{width:800px; margin-left:auto; margin-right:auto;}
td.handle{cursor:move}
</style>
</body>
</html>
名字
姓
电子邮件
选择权
添加
去除
+
请选择
选择1
选择2
$（文档）.ready（函数（）{
$（“input.tr_clone_add”）.live（'单击'，函数（））{
var计数器=0；
var max_rows=5；
计数器=$（'.tr_clone'）。长度；
if（parseInt（计数器）我在Stack Overflow上创建的一些其他帖子的帮助下实现了添加/删除功能，但是如果能提供任何帮助，我将不胜感激，或者如果有人知道一个插件可以自动处理这个问题，那将更好。你肯定应该创建一个JSFIDLE。。。这将使每个人都能更轻松地进行工作。谢谢你的提示，只要等待JSFIDLE允许注册，因为它目前有问题=）有一些非常好的插件。这些插件中的大多数已经过很好的测试，并且可以跨浏览器兼容，所以如果您正在寻找一个快速而好的解决方案，我建议您使用一个插件。我发现的一个例子是：这里有一个