Bootstrap table-striped does not change color

Loading...

Bootstrap table-striped does not change color

As you can see in the history of my questions recently, I am trying to understand Jquery/Javascript :) I run into the following problem and would like to propose it to you guys.
I have the following table (note: this is the HTML grabbed by inspect element, I am not sure why style="background-color: rgb(255, 255, 255); is there..):
Column A Column A Column A
Value 1 Value 2
Value 1 Value 2
And using the following code to select the row or select them all or select on row click: // 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); } But somehow the striped table row does not get highlighted, how come? And while the code is here already, I also have a problem where it does not check the checkall checkbox if I check each row manually. It works when I manually check the checkall checkbox, uncheck each checkbox and then manually check each row again. I cannot find the error.

Solutions/Answers:

Answer 1:

It seems bootstrap is setting every td background-color. So setting the tr to a background color does not work, even if you add !important. I solved it by adding a class to every td with the required background-color

css:

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

code:

note: code is part of a function which checks if a checkbox within the first td of the row is clicked.

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

It might not be a neat solution, but it works 🙂

Answer 2:

My experience with styling tables is that you should go for the cells of the row not the row itself.

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

References

Loading...