Bootstrap table-striped non cambia colore

Question

Come potete vedere nella storia delle mie domande di recente, sto cercando di capire Jquery/Javascript :) Mi imbatto nel seguente problema e vorrei proporlo a voi ragazzi.

Ho la seguente tabella (nota: questo è il codice HTML afferrato per ispezionare elemento, io non sono sicuro perché style = "background-color: rgb (255, 255, 255); è lì ..):

<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> 

e utilizzando il seguente codice per selezionare la riga o selezionarli tutti o selezionate nel braccio clic:?

// 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); 
} 

Ma in qualche modo la riga della tabella a strisce non viene evidenziato, come mai e mentre il codice è già qui, ho anche un problema in cui non controlla la casella di controllo checkall se Controllo ogni riga manualmente. Funziona quando controllo manualmente la casella di controllo del check-in, deseleziona ogni casella di controllo e poi controlla manualmente ogni riga nuovamente. Non riesco a trovare l'errore.

Answer 1

Sembra bootstrap è la creazione di ogni td background-color. Quindi, l'impostazione del tr su un colore di sfondo non funziona, anche se si aggiunge! Important. Ho risolto con l'aggiunta di una classe per ogni td con la richiesta background-color

css:

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

codice:

nota: codice fa parte di una funzione che controlla se si fa clic su una casella di controllo all'interno del primo td della riga.

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

Potrebbe non essere una soluzione pulita, ma funziona :)

Answer 2

La mia esperienza con le tabelle di stile è che si dovrebbe andare per le celle della riga non la riga stessa.

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