Javascript JQuery Tablesorter：将列显示为另一个已排序的列

我正在创建一个排序表，我希望当我单击一列进行排序时，它旁边会显示另一列。我现在有一个问题，当你点击它显示时，问题是当它以另一种方式排序时，当我仍然需要看到它时，列就会消失。当单击另一列时，我还希望隐藏另一列，单击显示另一列。如果我没有解释清楚，请告诉我！！以下是jquery中的代码：

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

---

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

我自己设法做到了，我不知道这是否是最好的方法，但它对我有效

我是这样做的：

首先，我在html中添加了以下内容：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

然后，您需要对所有您想要的列执行此操作

您可以通过使列滑动等方式在显示/隐藏中添加其他内容，我尝试过这种方法，但它使表格效果太慢，所以我放弃了它

但对于幻灯片效果，只需在显示/隐藏括号中添加以下内容：

  "slide",{direction: "left"},1000

并将以下内容添加到html的顶部：

 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>

---

更有效的方法是使用css。。。这样，在隐藏/显示表格单元格（）时，大型表格不会受到延迟的影响：

CSS

HTML

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

---

可以添加一种允许css动画的方法，但我认为只有当切换的列将内容包装在一个已设置动画（宽度）的div中，而不是尝试设置表格单元格的动画时，这种方法才会起作用。

能否共享您的HTML。。。我想你的意思是“列”而不是“行”，对吗？啊，是的，对不起，我现在已经更改了。谢谢你的回答，我在调用“hasclass”时似乎遇到了问题，因为类似乎不能与tableheader一起工作。我想这可能是因为我的CSS中存在一些错误，所以我不得不使用id来格式化隐藏的列。有没有办法用“th”中的属性id做到这一点，我自己尝试过，但是没有“.hasId”属性，所以它不起作用。函数是

hasClass

，带大写字母“C”。。。我不知道为什么它不起作用。如果需要使用ID，请尝试

this.ID==“abc”

。对于两个ID的比较，请使用

this.ID==“abc”| | this.ID==“xyz”

。是的，对不起，我是想这样键入的。当我完全按照您的方式输入代码时，我发现它不起作用，当我想隐藏列时，我不得不使用一个ID，而不是类，因为它根本不起作用。很抱歉，我如何将其放入javascript以便使用ID？请修改我共享的演示以显示您遇到的问题。jQuery选择器缺少

（

$（“#myTable”）

）-

 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>

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

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

$(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();
});