Bootstrap表條紋不會改變顏色

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

看來自舉設置每個TD的背景色。因此，將tr設置爲背景顏色不起作用，即使您添加！important也是如此。我解決它通過添加一個類的每一個TD與所需的背景色

CSS：

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

代碼：

注：代碼是用來檢查是否一個功能的一部分點擊該行的第一個td內的複選框。

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

它可能不是一個整潔的解決方案，但它的工作原理:)

Answer 2

我對造型表的體會是，你應該去行的單元格而不是行本身。

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

Answer 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" }); 
     } 
    } 
});​