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..):

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

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.

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..):

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

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.

• javascript
• jquery
• twitter-bootstrap

• So your problem is that style="background-color: rgb(255, 255, 255);" is added to a row or that the row isn't highlighted? – kidwon Commented Jan 3, 2013 at 13:44
• Im sorry, the real problem is that the row that are striped by bootstrap aren't highlighted when that row is checked. The onces that are white works. I am just not sure if the style="background-color: rgb(255, 255, 255);" is adding to the problem. – tvb Commented Jan 3, 2013 at 13:48
• you haven't added styles to your table so, i think it is giving it a default white background! rgb(255, 255, 255) = white :P – Talha Akbar Commented Jan 3, 2013 at 13:52
• @AspiringAqib Well, I use the bootstrap's .table-striped class (reference: twitter.github.com/bootstrap/base-css.html#tables , search for ".table-striped") So my table looks actually like that. When I click the row, or checkbox, or checkall checkbox all white rows change colors. The #ddd once's are not. – tvb Commented Jan 3, 2013 at 13:56
• well , by css nth-child property you can achieve this! e.g. td:nth-child(odd) { background:#ccc; } – Talha Akbar Commented Jan 3, 2013 at 15:01

3 Answers 3

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

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");

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