1

onclickイベントごとにテーブル行を追加するネットで入手したコードを使用しました。クリックすると行が削除されるすべての行にonclickイベントが必要であることに気付くまで、それは私にとって完璧に機能しました。

私のコードを使用してそれを行う方法はありますか?

以下のコードを参照してください。

Javascript/JQuery コード:

<script>
    var counter = 2;            
    function addRow() {
        event.preventDefault();
        var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' +              counter + '"/></td></tr>');
        counter++;                
        jQuery('table.actionsteps-list').append( newRow );
    }
</script>

HTML コード:

<table class="actionsteps-list" width="510">
   <tr>
       <th colspan="3" align="left">Action Steps</th>
   </tr>
   <tr>
       <td>Step #</td><td>Action Step</td><td>Owner</td>
   </tr>
   <tr>
       <td><label>1</label></td>
       <td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td>
       <td valign="top"><input type="text" name="txtOwner1" /></td>
   </tr>
</table>
<table width="510">
   <tr>
       <td align="right"><a href="#" title="" onclick="javascript:addRow();">Add Action</a></td>
   </tr>
</table>

ありがとうございました！

4

2 に答える 2

3

確かに、委任を使用してそれを実現できます。

$('table.actionsteps-list').on('click', 'tr', function(e){
  $(this).remove();
});

削除を通知するために行にボタンを追加したいので、(各行に) 追加すると仮定しましょう:

<td><button class="delete">Delete</button></td>

次に、委任方法を次のように変更します。

$('table.actionsteps-list').on('click', '.delete', function(e){ 
  e.preventDefault(); // stops the page jumping to the top
  $(this).closest('tr').remove();
});
于 2013-09-12T06:49:16.357 に答える