動的にテーブルを追加し、動的にそれらの行を追加するjQuery

Question

ここで私は動的にテーブルを追加し、それらの行を動的に追加するときに問題に直面しています。私が試したここで何：私は3番目のテーブルを追加し、スタックしている。この表に追加行をクリックしたときにテーブルを追加するとのためのhttps://jsfiddle.net/753ynxn3/ `

$(document).on('click', "#add_row" + j, function() { 
    $(this).siblings('.appendHere').children('table').children('tbody').children('#addr' + j).html("<td>" + (j + 1) + "</td><td><input type='text' name='attribute0' placeholder='Attribute' class='form-control'/></td><td><input type='text' name='productId0' placeholder='Product Id' class='form-control'/></td>"); 
     $(this).siblings('.appendHere').children('table').children('tbody').append('<tr id="addr' + (j + 1) + '"></tr>'); 
     j++; 
    }); 

その作業。

Answer 1

問題は、行の追加]ボタンを毎回クリックすると、jの値を使用して、追加のテーブルをクリックすると、jの値がリセットされない一方で、インクリメントと変化している、あります新しいテーブルのために。変数jの値をリセットする必要があります。私はこのメインのアップデートを行っているhttps://jsfiddle.net/j2mkL0qp/

：

j = parseInt($(this).siblings('.appendHere').children('table').children('tbody').children('tr:nth-last-child(2)').children('td:first-child').text()) 

Answer 2

$(document).on('click', "#add_row" + j, function() { 
    // snip 
}); 

これは、セレクタ#add_row + jに一致するIDを持つ要素を探し文書にクリックイベントをバインドします。あなたのケースでは、jは、イベントがバインドされたときに1です。イベントデリゲートは、IDが#add_row1の要素、またはケースの2番目のテーブルに対してのみ発生します。後続の表には、そのセレクタに一致する「行を追加」ボタンはありません。

（あなたは、セレクタ#add_row0に一致する文書にバインドされた別のクリックイベントを持っているのでところで、あなたの「行を追加」ボタンは、最初のテーブルのために働く。）

jはあなたのイベントリスナーの中にカウンターのようにインクリメントされこれはイベントリスナーが一致しようとするセレクタ文字列には影響しません。実行時に一度だけバインドされます。イベントリスナーのセレクタをより汎用的にする必要があります。これにより、将来のすべての要素と共通のクラスなどを指定して一致させることができます。

あなたが生成するリンクは、次のようになりますので：

<a id='add_row" + i + "' class='btn btn-default pull-left add_row'>Add Row</a> 

イベントリスナーでセレクタとして.add_rowを使用し、それらを一致させることができます：

$('document').on('click', '.add_row', function(){ 
    // snip 
}; 

そのコードのある場所では、することができます.add_rowセレクタも一致するので、#add_row0に一致するイベントリスナも削除してください。上記の回答に追加

Here's your fiddle with that update in place.

Answer 3

、私は、各クリックの上の行を追加しますフィドルを作成しました。あなたは行の番号付けを処理する代わりに見つける必要があります。

$('document').on('click', '.add_row', function(){ 
     $(this).siblings('.appendHere').children('table').children('tbody').append($('<tr class="addr"></tr>').html("<td>"+(j+1)+"</td><td><input type='text' name='attribute0' placeholder='Attribute' class='form-control'/></td><td><input type='text' name='productId0' placeholder='Product Id' class='form-control'/></td>")); 
     j++; 
    }; 

https://jsfiddle.net/ghvc0zes/