更改引导表中选定行的颜色答案

【问题标题】：change color of selected rows in bootstrap table更改引导表中选定行的颜色
【发布时间】：2015-10-27 12:29:56
【问题描述】：

how to change the colour of checked/selected rows in bootstrap table, when selected row of a table colour that specific row should be changed

$(document).ready(function () {
$('.checkall').on('click', function () {
    var $this = $(this),
        // Test to see if it is checked
        checked = $this.prop('checked'),
        //Find all the checkboxes
        cbs = $this.closest('table').children('tbody').find('.checkbox');
    // Check or Uncheck them.
    cbs.prop('checked', checked);
    //toggle the selected class to all the trs
    cbs.closest('tr').toggleClass('selected', checked);
 });

 });

【问题讨论】：

在您的代码中什么没有按预期工作？
也发布你的 HTML 表格结构。(cbs.prop('checked', checked)) ? cbs.closest('tr').addClass('bgClass') : else do whatever
我需要css来改变颜色
tr.bgSelectedRow { background: #ccc} 将这个类 bgSelectedRow 添加到选中的tr
cbs.parent().closest('tr').toggleClass('selected'); 将其添加到您的最后一次点击功能中，并将此样式添加到样式标记.selected { background:#ccc; }

标签： jquery css twitter-bootstrap-3

【解决方案1】：

如果您想在选中的复选框上突出显示表格行，我们可以使用带有 is(":checked") 的 if 条件，如果是，则我们使用 .closest() 找到最接近的 tr 元素，然后我们将类添加到它使用 addClass()

$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) { //If the checkbox is checked
    $(this).closest('tr').addClass("highlight_row"); 
    //Add class on checkbox checked
} else {
    $(this).closest('tr').removeClass("highlight_row");
    //Remove class on checkbox uncheck
}
});

DEMO

来源：Mr.Alien

【讨论】：