0

我有一个 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;
    });
});

这是小提琴

我想要的是，当我单击 go 按钮时，应该使用输入元素创建一个数组，从索引 0 开始，作为第一个条目的值。此外，应该使用相同的值为行指定 id（0 表示第一行，1 表示第二行，等等）。我在 CSS 上定义了一些 id，如果分配了 id，它可能会改变颜色。数组最终可能会收到警报（我想将它与 ajax 一起使用，以逐个传递值）。

我怎样才能做到这一点？

4

2 回答 2

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)
    });
});
于 2013-03-03T12:43:12.250 回答
1

table您应该在not in 中添加行，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/

于 2013-03-03T12:51:27.157 回答