單擊該行時將選定的類添加到表行

Question

我有桌子

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="activity_tab">
    <tr id="list_1">
        <td><span class="new_act">Folder files Created</span>
        </td>
        <td>2013-06-24 02:11 am</td>
    </tr>
    <tr id="list_2">
        <td><span class="new_act">Folder ss Created</span>
        </td>`enter code here`
        <td>2013-06-24 02:11 am</td>
    </tr>

當我單擊一行時，要向其添加選定的類，它的動態表數據就會在運行時出現。 之后，我在頁面頂部有超級鏈接

 <li><a href="javascript:void(0);" class="delete">Delete</a></li>

這是我現在的超鏈接，當單擊超鏈接時，選定的行將被刪除，我如何獲得選定的行，我對刪除它有全部了解，但找不到任何解決方案...

Answer 1

你可以這樣做 -

$('.activity_tab tr').on('click',function(){
  $(this).addClass('selected');
});
$('.delete').on('click',function(){
   $('tr.selected').remove();
});

Answer 2

我將在所選行上添加一個類。 我假設您一次只能選擇一個行，因此單擊新行時需要刪除所有選擇。

由於表是動態的，因此您需要使用委托事件偵聽器來添加所選的類。 有關委托事件的更多詳細信息，請參見jQuery on（）方法的文檔。

$(document).on('click', 'tr', function(e) {
    $('tr.selected').removeClass('selected'); //clear other selections
    $(this).addClass('selected'); //mark this row as selected
});

$('a.delete').on('click', function(e){
   e.preventDefault(); //stop native link behavior
   $('tr.selected').remove(); //remove selected row
});

請注意，將selected類添加到行的偵聽器將影響文檔中的任何tr元素。 如果頁面上還有其他表格，則需要使第二個選擇器（在“單擊”之后）更加具體。

Answer 3

你可以試試這個

$(function(){
    $(".activity_tab tr").click(function(){
        $(this).addClass("red");
    });

    $('.delete').on('click',function(){
       $('tr.red').remove();
    });
});

演示： http ： //jsfiddle.net/YNNVr/

Answer 4

您可以使用以下代碼在點擊時將selected類添加到tr 。

$('.activity_tab').on('click', 'tr', function(){
   $(this).addClass('selected');
});

而且，如果您想更進一步，可以使用toggleClass而不是addClass ，因此只需單擊tr即可刪除selected類。

然后，您可以選擇所有selected行並將其刪除

$('.delete').on('click', function(){
   $('activity_tab .selected').remove();
});

這將刪除帶有activity_tab類的表中具有selected類的所有行。