如何ajax发布一个表单，其中包含动态表中的字段，可以动态添加行和列

每个单元格都有一些字段，文本输入，单选按钮或选择。

我是否被迫以这种方式命名字段，以便名称包含行和列索引？ 比如“data [row] [col]”？ 在向表中添加行或列时动态创建这些字段名称是一种麻烦。

可以在这里使用jQuery魔法吗？

Answer 1

当然可以，看看这里：

// This assumes that you've wrapped the form #myform around the input $('#myform').submit(function() { $('#mytable tr').each(function(n, elem) { $('td', elem).each(function(m) { $('input:text, input:radio, textarea, select') .attr('name', 'data['+n+']['+m+']'); }); }); // Do some validation or just let it submit :D }); 

干得好！

Answer 2

当然可以使用jquery magic！ 只需将您的单元格命名为它们，并包含带有id的隐藏字段，例如：

      ...      

当你想要更新某一行时，通过执行类似操作来获取行

 var row = $('tr').find('.itemId[value=' + id + ']'); // if you're in an event handler: var id = $(this).parents('tr').find('.itemId').val(); //gets you the id you want 

现在你可以做以下事情：

 var firstname = row.find('.firstname :input').val(); //etc.. 

将它们编译为JSON对象：

 var data = {"itemId": id, "firstname": firstname, "lastname": lastname, ...etc }; 

并通过$.post() ， $.ajax()或$.get()提交。 简单！

Answer 3

假设您有一个包含y列和x行的表。 您可以使用nth-child和gt选择器从每个单元格中获取单元格数据。 例如，要选择第一列的单元格（排除“标题”单元格），您可以执行以下操作：

 $("#tableId td:gt(0):nth-child(1)").css("color", "red"); 

因此，要从每个单元格中获取表单元素值，您可以使用.map执行此类操作：

 var values = $("#tableId td:gt(0):nth-child(1) :input").map(function() { return this.value; }).get(); alert(values); 

演示： http ： //jsfiddle.net/Nunhk/3/