Bootstrap table-striped 不会改变颜色答案

【问题标题】：Bootstrap table-striped does not change colorBootstrap table-striped 不会改变颜色
【发布时间】：2013-01-03 13:40:02
【问题描述】：

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

我有下表（注意：这是检查元素抓取的 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 复选框，取消选中每个复选框，然后再次手动检查每一行时，它会起作用。我找不到错误。

【问题讨论】：

那么您的问题是style="background-color: rgb(255, 255, 255);" 被添加到一行或者该行没有突出显示？
对不起，真正的问题是，当检查该行时，由引导程序条带化的行没有突出显示。曾经是白色的作品。我只是不确定style="background-color: rgb(255, 255, 255);" 是否增加了问题。
你还没有为你的表格添加样式，所以我认为它给了它一个默认的白色背景！ rgb(255, 255, 255) = 白色：P
@AspiringAqib 好吧，我使用引导程序的 .table-striped 类（参考：twitter.github.com/bootstrap/base-css.html#tables，搜索“.table-striped”）所以我的表看起来实际上是这样的。当我单击行、复选框或选中复选框时，所有白色行都会改变颜色。 #ddd 一次不是。
好吧，通过 css nth-child 属性你可以实现这个！例如td:nth-child(odd) { background:#ccc; }

标签： javascript jquery twitter-bootstrap

【解决方案1】：

似乎引导程序正在设置每个 td 背景颜色。因此，将 tr 设置为背景颜色不起作用，即使您添加了 !important。我通过为每个 td 添加一个具有所需背景颜色的类来解决它

css：

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

代码：

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

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

这可能不是一个简洁的解决方案，但它有效:)

【讨论】：

嗯，我一直在为这个问题苦苦挣扎，以至于我看不到它被应用于 TD。谢谢。在我的例子中，我向表行添加了一个 CSS 类，以指示该记录是主记录。所以我重写了如下样式：.table-striped > tbody > tr.main-record:nth-child(odd) > td。它工作正常。

【解决方案2】：

我对表格样式的经验是，您应该选择行的单元格而不是行本身。

$(this).closest('tr td').css("background-color","#ffffff");

【讨论】：

呵呵，试了一下。这只适用于第一个 td then （这是复选框本身）但它确实发生了变化。现在仅适用于完整的行。
那么更改选择器，以便您选择该行的所有 td。 $( 'td' , $(this).closest('tr') ) 如果你坚持使用 .closest() 可能会这样。
类似$(this).closest('tr').each('td').css("background-color","#ccc"); 但这是无效的。编辑：不，如果您有更好的解决方案，请指出，以便我从中学习。
好吧，但似乎效率不高，试试我的建议$( 'td' , $(this).closest('tr') ).css("background-color","#ccc");
$( 'td' , $(this).closest('tr')) 确实有效。但是现在带有#ddd 的行当然也变成了白色。所以我需要添加更多的逻辑。当然，这仅适用于单击单行的复选框。 checkall 和 row click 的功能设置不同。

【解决方案3】：

Working Fiddle

    $('#checkall').on("change", function() {
        if(!$(this).is(":checked")) {
             $(".checkbox").each( function() {
                 $(this).prop("checked" , false);
                 $(this).parent().parent().css({ "background" : "#fff" });
             });
        }
        else {
             $(".checkbox").each( function() {
                 $(this).prop("checked" , true);
                 $(this).parent().parent().css({ "background" : "#ccc" });
             });
        }
});
$(".checkbox").on("change", function() {
    if ($(".checkbox:checked").length == $(".checkbox").length) {
         $("#checkall").prop("checked" , true);
         $(this).parent().parent().css({ "background" : "#ccc" });
    }
    else {
        if($(this).is(":checked")) {
            $("#checkall").prop("checked" , false);
            $(this).parent().parent().css({ "background" : "#ccc" });
        }
        else {
            $("#checkall").prop("checked" , false);
            $(this).parent().parent().css({ "background" : "#fff" });
        }
    }
});

【讨论】：