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;
    });
});

ここにフィドルがあります

私が望むのは、移動ボタンをクリックすると、最初のエントリの値のインデックス 0 から始まる入力要素で配列を作成する必要があることです。また、行には同じ値 (1 行目は 0、2 行目は 1 など) を使用して ID を指定する必要があります。CSS でいくつかの ID を定義しました。ID が割り当てられている場合、色が変わる可能性があります。配列は最終的に警告される可能性があります（値を1つずつ渡すために、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 に答える