Rozgrywka w paski Bootstrap nie zmienia koloru

Question

Jak widać w historii moich pytań ostatnio, staram się zrozumieć Jquery/Javascript :) Znalazłem następujący problem i chciałbym to zaproponować.

Mam poniższej tabeli (Uwaga: to jest HTML chwycił przez inspekcję elementu, nie jestem pewien, dlaczego style = "background-color: rgb (255, 255, 255); jest tam ..):

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

i stosując poniższy kod, żeby wybrać wiersz lub wybrać je wszystkie lub wybrać się na wierszu kliknij:?

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

Ale jakoś wiersz rozłożony stół nie zostanie podświetlony, dlaczego i choć kodu jest już tutaj, mam również problem, jeśli nie zaznacza checkallu, jeśli Sprawdzam każdy rząd ręcznie. Działa, gdy ręcznie zaznaczam pole checkall, odznaczam każde pole wyboru, a następnie ręcznie sprawdzam każdy wiersz ponownie. Nie mogę znaleźć błędu.

Answer 1

Wydaje bootstrap jest ustawienie każdego td background-color. Zatem ustawienie tr na kolor tła nie działa, nawet jeśli dodasz! Ważne. Rozwiązałem go dodając klasę do każdego td z wymaganą background-color

css:

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

Kod:

Uwaga: kod jest częścią funkcji, która sprawdza, czy zaznaczone jest pole wyboru w pierwszym td wiersza.

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

To nie może być miłe rozwiązanie, ale działa :)

Answer 2

Moje doświadczenia ze stołami do stylizacji polegają na tym, że należy wybrać komórki rzędu, a nie sam rząd.

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