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

最后一栏有一个＆＃34; toggler＆＃34; class是允许对它进行排序。

可以添加允许css动画的方法，但我认为只有当切换列的内容包含在动画（宽度）的div中而不是尝试为表格单元设置动画时，它才有效。

Answer 2

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

我是这样做的：

首先我将这些添加到我的html中：

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

我在html中输入了脚本标记：

$(document).ready(function(){
    $("put column header id here").click(function(){
        $("td:nth-child(column num want to show),th:nth-child(column num want to show)").show() 
        $("put all the other column headers id in here except the one showed seperated by comma").click(function(){   $("td:nth-child(column num want to hide),th:nth-child(column num want to hide)").hide(); 
        });
     }); 
});'

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

你可以通过使列滑动等方式向show / hide添加其他东西，我试过这个但它使得表格效果变得如此缓慢以至于我摆脱了它。

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

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

JQuery Tablesorter：列显示另一个是排序的

2 个答案: