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

我想要的是，当我点击go按钮时，应该使用输入元素创建一个数组，从索引0开始，输入第一个条目的值。另外，行应该使用相同的值给出id（第1行为0，第2行为1等）。我已经在CSS上定义了一些id，如果分配了id，它可能会改变颜色。最后可能会警告数组（我想使用ajax，逐个传递值）。

我该怎么做？

Answer 1

以下是一个示例：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)
    });
});

Answer 2

您应该在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/

jQuery动态表单字段数组

2 个答案: