如何动态添加HTML数组元素[]


How to dynamically add an HTML array element[]

我有一个表单,需要根据用户的意愿动态添加任意数量的文本字段。我希望文本字段是一个数组,例如:

<input type="text" name="room_text[]">

我已经建造了一些我认为可行的东西。它成功地添加了更多的文本框。我动态地添加了两个带有javascript的文本框,使表单看起来像这样:

<input type="text" name="room_text[]">
      <input type="text" name="room_text[]">
      <input type="text" name="room_text[]">

但是,当我把它发布到PHP文件时,它只得到第一个值。我之所以知道这是一个javascript问题,是因为如果页面加载时有多个文本框,它可以正常工作。就在您使用javascript添加更多文本框时。

如果这有帮助的话,这就是我用来添加框的jquery函数:

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $(this).parent('td').parent('tr').clone();
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

我认为问题存在于.clone()函数中。你能尝试一种不同的方法吗,比如。。。

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = '<tr>' + $(this).parent('td').parent('tr').html() + '</tr>';
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

更新-糟糕。在那个版本中,"clone"是一个字符串,而不是一个元素,所以.children()函数不起作用。。。这是一个修正版本:

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $('<tr>' + $(mu).html() + '</tr>');
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).hide();
    $(mu).after(clone);
    $(clone).show("fast");
});​