单击jQuery addClass上的表行不能与Bootstrap一起使用

I have a dynamic table in Bootstrap. The idea is to change row color on click. Firebug tells me that the "selectedRow" class is being applied, but rows do not change color.

我在Bootstrap中有一个动态表。想法是在点击时更改行颜色。 Firebug告诉我正在应用“selectedRow”类，但行不会改变颜色。

HTML

<div class="row">
    <div class="col-sm-12" style="background-color:  color: rgb(244, 244, 243);">
        <div class="table-responsive">
            <table id="daTable" class="table">
                <thead>
                    <tr><th>xxxxx</th>
                    <th>yyyyy</th></tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

var tabl = document.getElementById("daTable");
for (var i = 0; i <data.length; i++) {
    var d= data[i];
    tableRow(tabl, [d.field1, d.field2]);           
}

$(tabl).on('click', '.clickable-row', function(event) {
    $(this).addClass("selectedRow");
    $(this).find('td').addClass("selectedRow");    
});

CSS

.selectedRow {
    background-color:red !important;
}

Thanks

谢谢

2 个解决方案

#1

I don't see where are you applying the clickable-row class to the table rows. What if you just do:

我没有看到您将可点击行类应用于表行的位置。如果你这样做怎么办：

$('#daTable tr').on('click', function(event) {
     $(this).toggleClass("selectedRow");
});

#2

my bad. there was a typo in the css. thanks anyway

我的错。 css中有一个拼写错误。不管怎么说，还是要谢谢你

#1