Question

我有一个分层表，我动态地添加了第一个类名。我想在用户单击一行时添加另一个类（例如 - 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');
});

提前致谢

Answer 1

您可以使用：

var table = $('#tble_data');    

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

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

});

Answer 2

我会使用toggleClass而不是if / else。最后，它的内容是相同的，但维护起来更简单。

＆＃13;

//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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

在表行JQuery中添加和删除类

2 个答案: