在表行 JQuery 中添加和删除类答案

【问题标题】：Add and remove class in table rows JQuery在表行 JQuery 中添加和删除类
【发布时间】：2016-08-18 21:56:40
【问题描述】：

我有一个层次表，我在其中动态添加第一类名称。我想在用户单击一行时添加另一个类（例如 - active），并在再次单击时删除。如果不在同一行中再次单击，则它将保持不变（active），如果单击另一行，它将在那里添加活动类。我不想使用toggleClass，因为我已经在另一个函数中使用了它。我试过的代码不能正常工作。

我的表结构是——

<table id="tbl_data">
<tr class="t1" ><td><div><a href="#">test1</a></div></td></tr>
<tr class="t2" ><td><div><a href="#">test2</a></div></td></tr>
<tr class="t3" ><td><div><a href="#">test3</a></div></td></tr>
</table>



var lvl = '@h_lbl'; (eg: cls1)                                  

$('table#tbl_data tbody tr.' + lvl).on('click', function (event) {

if ($(this).hasClass('active'))
    $(this).removeClass('active');
else            
    $(this).addClass('active');
});

提前致谢

【问题讨论】：

标签： javascript jquery asp.net-mvc

【解决方案1】：

你可以用这个：

var table = $('#tble_data');    

table.on('click', 'tr', function () {

    if ( $(this).hasClass('active') ) {
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }

});

【讨论】：

谢谢约翰，它可以工作，但我删除了这一行 ($('tr.active').removeClass('active');)。因为如果用户不再单击，我想保留类名。非常感谢您的帮助
当然可以。我不明白你的问题很抱歉。我会更新我的答案。

【解决方案2】：

我会使用 toggleClass 而不是 if/else。说到底还是一样的，但是维护起来更简单。

//Event delegation on the tbody allows for one event to be attached
$("#tbl_data tbody").on("click", "tr", function () {
    //toggle class does the check to add/remove the class
    $(this).toggleClass("selected");
    //If only one row can be selected
    //$(this).siblings(".selected").removeClass("selected");
});

table tr, td { border: 1px solid black; padding: .5em; }
.selected {
    background-color: yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl_data">
<tr class="t1" ><td><div><a href="#">test1</a></div></td></tr>
<tr class="t2" ><td><div><a href="#">test2</a></div></td></tr>
<tr class="t3" ><td><div><a href="#">test3</a></div></td></tr>
</table>

【讨论】：