Question

我目前正在进行分页，这个分页涉及使用tablesorter.com的排序列。

请查看来自tablesorter的jquery代码的底部，允许我在每行使用带有复选框的分拣机，我想使用css一次选中复选框添加背景颜色，如果复选框未检查则删除背景颜色，是吗任何人都帮我如何为背景颜色编写额外的代码行！

非常感谢。

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

您不需要窗口小部件来执行此操作（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
    });
});

上述内容适用于原始的tablesorter。

使用复选框在整行表上添加背景颜色

1 个答案: