1

元々1行の入力フィールドを持つテーブルを持つフォームがあります。ユーザーは[新しい行]ボタンをクリックして、入力フィールドが空の別の行を取得できます。これはすべてうまく機能していますが、新しい行のID番号も同時にインクリメントする必要があります。

サンプルのJSFiddleを次の場所にセットアップしました。

http://jsfiddle.net/fmdataweb/vRe9v/2/

これを行う方法について、ここや他のサイトでいくつかの例を見てきましたが、コードを壊さずに既存のJavascriptに組み込むことはできません。これがJavascriptです：

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {

var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
$(this).remove();
});​

誰かが私の既存のJavascriptを拡張して、新しい行を作成すると同時にIDをインクリメントする方法を教えてくれたら本当にありがたいです。

4

2 に答える 2

1 
var table = $( '#nextYear' )[0],
    nextId = 2;

$( table ).delegate( '#button2', 'click', function () {

    var thisRow = $( this ).closest( 'tr' )[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('')
         .attr('id',function(i,oldVal){ return oldVal.replace(/\d+/,nextId); });
    $(this).remove();
    nextId++;
});​

説明として、コールバック関数を使用して.attr()メソッドを呼び出すと、コールバックはjQueryオブジェクトの要素ごとに1回呼び出され、戻り値はその要素の属性を設定するために使用されます。

于 2012-08-15T12:33:34.300 に答える
1

このフィドルを確認してください：http：//jsfiddle.net/2Ds4J/1/

DOMに挿入する前に、複製された行ですべての入力と選択のIDをインクリメントするための小さなコードを追加しました。

var newIDSuffix = 2;
$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];

    var cloned = $( thisRow ).clone();
    cloned.find('input, select').each(function() {
         var id = $(this).attr('id');
         id = id.substring(0, id.length-1) + newIDSuffix;
         $(this).attr('id', id);
    });

    cloned.insertAfter( thisRow ).find( 'input:text' ).val( '' );

    newIDSuffix++;
});
于 2012-08-15T12:35:48.283 に答える