jquery，數組和動態添加和刪除文本輸入

Question

我有一種情況，我需要能夠動態添加，刪除和重置乘客名單，最多10名乘客。

下面是HTML接口的代碼：我使用jQuery的添加，刪除和重置乘客名單

<div id="add_passenger"> 
<br> 
<input type="button" id="add_pax" name="add_pax" value="Add Passenger Name" /> 
<input type="button" id="del_pax" name="del_pax" value="Delete Passenger Name" /> 
<input type="button" id="reset_pax" name="reset_pax" value="Reset Passenger Name" /> 

。

下面是我的jQuery代碼：

$("#add_pax").click(function() { 

var limit = $("div[id^='pax_list']").length; 
var p = limit + 1; 

if (p < 11) { 
    $("#add_passenger").append(addPassenger(p)); 
} else { 
    alert("Limit of " + limit + " Passenger Name reached"); 
} 

$("#edit_pax_num").val(limit+1); 
}); 

    $("#del_pax").click(function() { 

    var t = $("div[id^='pax_list']").length; 

    $("div[id^='pax_list']").each(function() { 
     if ($("input[type=checkbox]",this).is(':checked')) { 
      if(t > 0) { 
       $(this).remove(); 
       t--; 
      } 
     } 
    }); 
}); 

$("#reset_pax").click(function() { 
    $("div[id^='pax_list']").each(function() { 
     $(this).remove(); 
    }); 
}); 


function addPassenger(p) { 
    var text = "<div id=\"pax_list" + p + "\"><input type=\"checkbox\">&nbsp;<strong>Passenger Name " + p + ":</strong> " + 
     "<input id=\"pax_name" + p + "\" class=\"textbox\" type=\"text\" maxlengt=\"100\" style=\"width:300px;\" name=\"pax_name[]\"><br></div>"; 

    return text; 
}; 

的問題是在調用pax_list那麼一些獨特的DIV ID將被分配每位乘客名單。如何添加，刪除和重置乘客名單並分配一個唯一的ID。

我有一個想法，每次用戶刪除基於複選框的列表，所有存在的乘客名稱將被添加到一個數組中，並且整個列表將被重新創建。然後，最後，陣列中的乘客姓名將被放回第一個可用輸入。因此，號碼始終從號碼1開始。

增加乘客jquery功能將查看最後一個號碼，以便能夠添加更多乘客，直到達到限制。

如何將乘客名單列表添加到數組中？

這就是我要做的：

var divPaxList = $("div[id^='pax_list']").length; 

    if(divPaxList == 0) { 
     alert("There is no Passenger Name listed. Please add Passenger Name."); 
    } else { 

     $("input[id^='pax_name']").each(function() { 

      var paxName = document.getElementsByName("pax_name[]").val; 
      var paxArray = $.makeArray(paxName); 

      $(paxArray).appendTo("#add_passenger"); 

     });  
    } 

如果一些人有更好的解決辦法。很抱歉，長期以來，非常感謝你的幫助。

Answer 1

這樣看起來有點像你的版本，因爲它遍歷元素和每個值添加到陣列。

var arrayWithFooValues = []; 
$("input[id^='pax_name']").each(function() { 
    arrayWithFooValues.push(
     $(this).val() 
    ); 
}); 

Answer 2

這是從多個元素得到與值的數組的一種方式：

var arrayWithFooValues = $('.foo').map(
    function() { 
     return $(this).val(); 
    } 
); 

Answer 3

非常好的劇本，但會更好，如果它會驗證領域以及和還解釋瞭如何從像PHP服務器端語言的文本框的值。 我發現一個教程在

http://www.pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html

解釋瞭如何動態地添加，PHP和JSP/servlet的