如何在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()提交。簡單！