单击该行时将选定的类添加到表行

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类的所有行。