Jquery 启用复选框的tablesorter stickyhead小部件跳到表的顶部

我有一个关于tablesorter小部件stickyhead的问题

有一个包含许多行的表，向下滚动会迫使标题粘贴到窗口顶部。所以它总是可见的

在表的第一列中，我在每一行中都有一个checkbox元素。向下滚动表格并单击任何较低的复选框将强制跳转到表格顶部。我想防止这种情况发生

请参见下面评论中的小提琴示例

---

有什么建议吗？

我不知道你有没有从网上看到过。它似乎没有您描述的问题-可能是因为

mouseup

函数中的

returnfalse

代码

CSS

脚本-根据需要使用复选框设置

列和
变量

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell, cellIndex) {
        var c, $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr').toggleClass('checked', c === 1);
        return c;
    },
    type: 'numeric'
});

$(function () {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        },
        initialized: function (table) {

            // column containing all of the checkboxes (zero-based index)
            var columnWithCheckboxes = 0,
                // resort the table after the checkbox status has changed
                resort = false,

                ck, $hdrCheckbox,
                c = table.config,
                wo = c.widgetOptions,
                $t = $(table);

            $hdrCheckbox = $t
                .add(wo.$sticky)
                // make checkbox in header set all others
                .find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
                .bind('change', function () {
                    ck = this.checked;
                    $t
                        .children('tbody')
                        .find('tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input')
                        .each(function () {
                            this.checked = ck;
                            $(this).trigger('change');
                        });
                    // make sure stickyHeader checkbox gets updated
                    $hdrCheckbox.prop('checked', ck);
                })
                .bind('mouseup', function () {
                    return false;
                });

            $t.find('tbody tr').each(function () {
                $(this)
                    .find('td:eq(' + columnWithCheckboxes + ')')
                    .find('input[type=checkbox]')
                    .bind('change', function () {
                        $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                    });
            });
        }
    });
});

您是否尝试过阻止事件传播？给我们一个JSFIDLE，问题是，我找不到停止传播的对象，它是一个表，还是一个标题或复选框。我甚至不明白是什么触发了跳转。请尝试将
单击
事件添加到
复选框中
，并使用
事件
对象停止传播。您的演示有一个js错误
clickedRow未定义
@Cerlin Boss:停止传播事件不会带来任何结果。它已定义。这里没有显示。
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell, cellIndex) {
        var c, $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr').toggleClass('checked', c === 1);
        return c;
    },
    type: 'numeric'
});

$(function () {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        },
        initialized: function (table) {

            // column containing all of the checkboxes (zero-based index)
            var columnWithCheckboxes = 0,
                // resort the table after the checkbox status has changed
                resort = false,

                ck, $hdrCheckbox,
                c = table.config,
                wo = c.widgetOptions,
                $t = $(table);

            $hdrCheckbox = $t
                .add(wo.$sticky)
                // make checkbox in header set all others
                .find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
                .bind('change', function () {
                    ck = this.checked;
                    $t
                        .children('tbody')
                        .find('tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input')
                        .each(function () {
                            this.checked = ck;
                            $(this).trigger('change');
                        });
                    // make sure stickyHeader checkbox gets updated
                    $hdrCheckbox.prop('checked', ck);
                })
                .bind('mouseup', function () {
                    return false;
                });

            $t.find('tbody tr').each(function () {
                $(this)
                    .find('td:eq(' + columnWithCheckboxes + ')')
                    .find('input[type=checkbox]')
                    .bind('change', function () {
                        $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                    });
            });
        }
    });
});