1

クリック時にテーブル行を削除するには?

ここにjsfiddleがあります。

スクリプトが現在行っている最後の行ではなく、del リンクがネストされている行のみを削除したい。

Onclick 呼び出しdelTableRow()関数とその関数を変更して、ネストされたデル リンク行を削除する必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
    jQtable.each(function(){
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}
function delTableRow(jQtable){
    jQtable.each(function(){
        $('tr:last', this).remove();
    });
}
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
</table>
4

6 に答える 6

9

onclick を削除し、クラスに置き換えます (つまり、class="remove")。イベントをテーブルにバインドします。これにより、多くのイベント ハンドラーを使用するよりもパフォーマンスが向上し、追加された新しい行もこの動作に従うようになります。

$('table').on('click','tr a.remove',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});
于 2013-03-18T10:16:56.550 に答える
2 
$('td a').on('click',function(e){
   //delete code.
   e.preventDefault();
   $(this).parent().parent().remove(); // OR $(this).parents('tr').remove();
});
于 2013-03-18T10:12:20.443 に答える
2

インライン JavaScript をすべて削除し、クリック イベントを使用します。属性で onclick イベントを呼び出す必要はありません。$(this).parents('tr').remove();

これを試して

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">  </script>
<script type="text/javascript">
  $(function(){
      $('table').on('click','tr a',function(e){
         e.preventDefault();
        $(this).parents('tr').remove();
      });
 });

</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td><a href="#">del</a></td>
     //---^---here remove the onclick inline function for all.. 
  </tr>
 ....
</table>

ここで働くフィドル

于 2013-03-18T10:14:49.857 に答える
0 
$('td a').on('click',function(){
   e.preventDefault();
   $(this).parent().parent().remove();
});
于 2013-03-18T10:14:16.753 に答える
0

使用する

$(this).parent().parent().remove();

アンカータグに。したがって、リンクが tr の子である td の子である場合、tr は削除されます。

于 2013-03-18T10:15:52.210 に答える