Add background color on full row table with check box

Question

I'm currently working on pagination , this pagination is involved with sort column using tablesorter.com.

please see bottom of jquery code from tablesorter, that allow me to use sorter with checkbox on each row, I want to add background color using css once check box is checked, if check box is not check then remove background color, does anyone help me how to write that extra line of code for background color!

many thanks.

$(function() {

        // add ie checkbox widget
        $.tablesorter.addWidget({
            id: "iecheckboxes",
            format: function(table) {
                if($.browser.msie) {
                    if(!this.init) {
                        $(":checkbox",table).change(function() { this.checkedState = this.checked});                
                        this.init = true;
                    }
                    $(":checkbox",table).each(function() {
                        $(this).attr("checked",this.checkedState);
                    });
                }
            }
        });

        $("table").tablesorter({widgets: ['iecheckboxes']})


    });

Answer 1

You don't need a widget to do that (demo):

$(function () {
    var $table = $('table'),
        checkboxColumn = 0;

    // checkboxes updates
    $table.find('tbody').on('change', 'input', function () {
        var $cell = $(this).closest('td');
        // only accept checkboxes in the first column
        if ($cell[0].cellIndex === checkboxColumn) {
            $cell.closest('tr').toggleClass('checked', this.checked);
            // update cache with checkbox state
            $table.trigger('updateCell', [ $cell[0] ]);
        }
    });

    $table.find('thead input').on('change', function(){
        var chk = this.checked;
        $table.find('tbody tr').each(function(){
            $(this).find('td:eq(' + checkboxColumn + ') input')
                .prop('checked', chk)
                .trigger('change');
        });
    });

    var headers = {};
    headers[checkboxColumn] = { sorter: false };

    $table.tablesorter({
        widgets: ['zebra'],
        headers: headers
    });
});

The above works with the original tablesorter.