jQuery動態表單字段數組

Question

我有一個html表單。一個條目可以多次添加不同的值，並以數組的名字命名（如fieldname[]）。點擊[+]按鈕使用[ - ]按鈕創建新的字段，單擊時將刪除該條目。

<table cellpadding="0" cellspacing="0"> 
<tr> 
<td>Item</td> 
<td id="resource"> 
<input id="item" name="item[]" type="text" value=""> 
</td> 
<td> 
<img id="addScnt" alt="[+]">&nbsp;</td> 
</tr> 
<br> 
<button id="go">go</button> 
</table> 

jQuery(document).ready(function($){ 
    var scntDiv = $('#resource'); 
    var i = $('#resource p').size() + 1; 
    var name = $('#resource p'); 
    $('#addScnt').live('click', function() { 
     $('<tr><td class="" id=""><input id="item" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 
    $('#remScnt').live('click', function() { 
     if(i > 1) { 
       $(this).parent().parent().remove(); 
       i--; 
     } 
     return false; 
    }); 
}); 

這裏是fiddle

我想要什麼，當我點擊進入按鈕，數組應與輸入元素創建，開始與第1項的值索引0。此外，行應給予ID使用相同的值（0爲第一行，1爲第二等..）。我已經在CSS上定義了一些ID，如果分配了ID，它可能會改變顏色。數組可能會最終警告（我想用ajax來傳遞值）。

我該怎麼做？

Answer 1

你應該table添加行不td所以首先要編寫它proper format

它應該是這樣的：

<table cellspacing="0" cellpadding="0" id="table"> 
<tbody> 
    <tr> 
     <td>Item</td> 
     <td id="resource"> 
      <input type="text" value="" name="item[]" id="item" class=""> 
     </td> 
     <td> 
      <img alt="[+]" id="addScnt" class="add">&nbsp;</td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td id="" class=""><input type="text" value="" name="item[]" id="item"></td> 
     <td><img alt="[-]" id="remScnt" class="minus"></td> 
    </tr> 
</tbody> 
</table> 

並用於按鈕go

代碼是小提琴

$('#go').live('click',function(){ 
    $('input[name="item[]"]').each(function(){ 
    alert($(this).val());//code what you want on click of button 
    }); 
}); 

檢查http://jsfiddle.net/hjNdb/5/

Answer 2

下面是一個例子：http://jsfiddle.net/hjNdb/2/

$(function() { 
    var scntDiv = $('#resource'); 
    var i = $('#resource p').size() + 1; 
    var name = $('#resource p'); 
    $('#addScnt').live('click', function() { 
     var id = $('input').length; // Id attribution 
     $('<tr><td class=""><input id="item' + id + '" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 
    $('#remScnt').live('click', function() { 
     if (i > 1) { 
      $(this).parent().parent().remove(); 
      i--; 
     } 
     return false; 
    }); 

    //Array construction 
    $('#go').click(function() { 
     var myArray = []; 
     $('input').each(function() { 
      myArray.push($(this).val()); 
     }); 
     alert(myArray) 
    }); 
});