Question

我有一个像这样的 Bootstrap 表：

<table id="myTable">
    <tr>
        <th data-field="name" data-formatter="nameFormatter"></th>
        <th data-field="number" data-formatter="numberFormatter"></th>
        <th class="newClass"></th>
    </tr>
</table>

的jQuery

$('#myTable').on('click-row.bs.table', function (e, row, $element) {
    // $('.newClass').removeClass('newClass');
    $('.newClass').addClass('shown') // <-- this doesn't seem to work
}

CSS

td.newClass {
    background-image: url("../../Content/Images/open.png");
}

tr.shown td.newClass {
    background-image: url("../../Content/Images/close.png");
}

我正在尝试addClass()关于表的行点击事件，但它似乎不起作用。我错过了什么或做错了什么。

Answer 1

您的CSS似乎与您的标记不匹配：

tr.shown td.newClass
{
    background-image: url("../../Content/Images/close.png");

}

哪个正在查找表行的shown类。但看起来您正在将shown类添加到table-cell：

$('#myTable').on('click-row.bs.table', function (e, row, $element) {
    //$('.newClass').removeClass('newClass');
    $('.newClass').addClass('shown')    // isn't $('.newClass') the cell and not the row?
}

<强>更新

要解决此问题，您可以更改CSS：

td.newClass.shown { ... }

或你的jQuery：

$element.addClass('shown');

Answer 2

它会帮助你：

＆＃13;

Utf-8

＆＃13;

$(document).ready(function(){
  
  
  
  $("#myTable tr").on('click',function(){
    
    $(this).find(".newClass").addClass("shown");
    
  });
  
 
  
  
});

＆＃13;

jQuery addClass在Bootstrap表中不起作用

2 个答案: