如何在ajax中发布包含可动态添加行和列的动态表中的字段的表单

Question

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

我被迫以这种方式命名字段，以便名称体现行和列索引？像“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

假设你有一个y列和x行的表。您可以使用nth-child和gt选择器简单地获取每个单元格中的单元格数据。例如，为了选择第一列的单元格（exluding的“标头”小区）可以这样做：

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

Answer 3

当然jQuery的魔法

可以用！仅举你的细胞它们是什么，包括一个隐藏字段的ID，例如：

<tr> 
    <td class="firstname"><input /></td> 
    <td class="lastname"><input /></td> 
    <td class="address"><input /></td> 
    <td class="phone"><input /></td> 
    ... 
    <td class="whatever"> 
     <input /> 
     <input type="hidden" class="itemId" value="[the id]" /> 
    </td> 
</tr> 

当你想更新某行，通过执行类似

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()提交。简单！