javascript - JQuery 表排序器 : Have column show as another is sorted

Question

我正在创建一个排序表，当我单击要排序的一列时，我希望它会在其旁边显示另一列。我目前的情况是，当您在显示后单击它时，问题是当它以另一种方式排序时，当我仍然需要查看它时，该列就会消失。当单击另一列时，我还希望隐藏另一列并单击显示一列。如果我没有解释清楚，请告诉我!下面显示了来自 jquery 的代码:

$(document).ready(function(){
   $("#CATAID").click(function(){
        $("td:nth-child(7),th:nth-child(7)").toggle();
    });
});

有人知道如何做到这一点吗？

Answer 1

更有效的方法是使用 css...然后隐藏/显示表格单元格时大型表格不会受到延迟的影响 ( demo ):

CSS

th:nth-child(4), td:nth-child(4) {
    display: none;
}
.toggle th:nth-child(4),
.toggle td:nth-child(4) {
    display: table-cell;
}

HTML

<table class="tablesorter-blue">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th class="toggler">Animals</th>
            <th class="toggler">Sites</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>

Javascript

$(function () {
    $('th').click(function(){
        // toggle "toggle" class name on the table when the
        // header with a class name of "toggler" is clicked
        $('table').toggleClass( 'toggle', $(this).hasClass('toggler') );
    });

    $('table').tablesorter();
});

最后一列有一个“toggler”类的原因是为了允许对其进行排序。

可以添加允许 CSS 动画的方法，但我认为只有当切换列的内容包含在动画(宽度)的 div 中而不是尝试对表格单元格进行动画处理时，它才会起作用。