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

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

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

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

当然可以,看看这里:

// 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 }); 

干得好!

当然可以使用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()提交。 简单!

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

 $("#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/