javascript - Bootstrap table-striped不改变颜色

Question

正如您最近在我的问题历史记录中看到的那样，我正在尝试了解 Jquery/Javascript :) 我遇到了以下问题，并想向你们提出建议。

我有下表(注意:这是 inspect 元素抓取的 HTML，我不确定为什么 style="background-color: rgb(255, 255, 255); 在那里..):

<table class="table table-striped table-condensed" id="instance-table">
    <thead>
        <tr id="checkrow">
            <th><input type="checkbox" id="checkall"></th>
            <th>Column A</th>
            <th>Column A</th>
            <th>Column A</th>
        </tr>
    </thead>
    <tbody id="instanceInnerContent">
        <tr style="background-color: rgb(255, 255, 255);">
            <td class="act"><input type="checkbox"></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
            <tr style="background-color: rgb(255, 255, 255);">
            <td class="act"><input type="checkbox"></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

然后使用以下代码选择行或全部选择它们或在行上单击选择:

// if user clicks on checkbox with id="checkall" - all checkboxes are selected
// and table row background is highlighted
 $('body').on('click', '#checkall', function () {
    $('input:checkbox:not(#checkall)').prop('checked',this.checked);
    if ($(this).is(':checked') == true) {
        $("#instance-table").find('tr:not(#checkrow)').css("background-color","#ccc");
        //$('#instance-action').removeAttr('disabled');
    } else  {
        $("#instance-table").find('tr:not(#checkrow)').css("background-color","#fff");
        //$('#instance-action').attr('disabled', 'disabled');
    }
});  

// if user clicks on checkbox, diffrent than checkbox with id="checkall" , 
// then checkbox is checked/unchecked
$('body').on('click', 'input:checkbox:not(#checkall)', function () {
    if($("#checkall").is(':checked') == true && this.checked == false) {
        $("#checkall").prop('checked',false);
        $(this).closest('tr').css("background-color","#ffffff");
    }
    if(this.checked == true) {
        $(this).closest('tr').css("background-color","#ccc");
        //$('#instance-action').removeAttr('disabled');
        // function to check/uncheck checkbox with id="checkbox"
        CheckSelectAll(); 
    }
    if(this.checked == false)  {
        $(this).closest('tr').css("background-color","#ffffff");
        //$('#instance-action').attr('disabled', 'disabled');
    }
});

// if user clicks, someware on table row, checkbox is checked/unchecked
// and table row background is highlighted or not
$('body').on('click', '#instance-table tbody tr', function () {
    var this_row = $(this);
    var checkbox = this_row.find('input:checkbox');
    if (event.target.type !== 'checkbox') {    
        if ( checkbox.is(':checked') == false ) {
            checkbox.prop('checked', true);
            this_row.css("background-color","#ccc");
            //$('#instance-action').removeAttr('disabled');
            CheckSelectAll();
        } else {
            checkbox.prop('checked', false);
            this_row.css("background-color","#fff");
            //$('#instance-action').attr('disabled', 'disabled');
            CheckSelectAll();
        }
    }    
});

function CheckSelectAll() {
 var flag = true;
 $('input:checkbox:not(#checkall)').each(function() {
  if(this.checked == false)
   flag = false;
   //console.log(flag);
 });
  $("#checkall").attr('checked',flag);
 }

但不知何故，条纹表格行没有突出显示，这是怎么回事？ 虽然代码已经在这里，但我还有一个问题，如果我手动检查每一行，它不会检查 checkall 复选框。当我手动选中 checkall 复选框，取消选中每个复选框，然后再次手动选中每一行时，它会起作用。我找不到错误。

Answer 1

似乎 bootstrap 正在设置每个 td 背景颜色。所以将 tr 设置为背景颜色是行不通的，即使你添加了 !important。我通过向每个具有所需背景颜色的 td 添加一个类来解决它

CSS:

.selected { background-color: #ddd !important; }

代码:

注意:代码是函数的一部分，该函数检查是否单击了行的第一个 td 中的复选框。

$(this).parent().parent().children('td').each(function() {
 $(this).addClass("selected");
});

这可能不是一个完美的解决方案，但它确实有效:)