仅显示容器内的匹配行并旋转进出视图答案

【问题标题】：Display Only Matched Rows Within a Container and Rotate into and Out Of View仅显示容器内的匹配行并旋转进出视图
【发布时间】：2014-03-31 13:47:33
【问题描述】：

更新：我添加了我正在使用的 JSFiddle。基本上任何将数据包含在给定容器中的方式。 http://jsfiddle.net/donlaur/K8q5P/1/

分叉版本更接近，上下移动。 http://jsfiddle.net/donlaur/u87VQ/5/

我正在处理一个带有 jQuery 的 HTML5 页面。我的大部分组件都可以正常工作。我只是缺少一个元素。我将描述我需要什么，希望你能帮助我到达那里。我省略了部分内容，因为它可能不尊重 sn-p 和我需要的部分。

假设我有一个 6 行的表。一半来自 A-F，另一个来自 G-Z。我有一个链接，单击时显示来自 A-F 的 3 行，另一个链接显示来自 G-Z 的其他 3 行。如果我单击全部显示，它将显示所有 5 行。我默认让类与所有行匹配。当我按字母过滤时，我会删除所有匹配的内容，然后只将其添加回我的匹配集中。因此，当我点击 A-F 时，只有具有 A-F 过滤条件的那些才会有匹配的类。

我将这些放在一个容器中，我只想一次显示 2 行。我还有一个向上的链接和一个向下的链接并遍历这些行。 2 之外的其他行在容器中，但设置为溢出：隐藏。

如果我单击我的 A-F 链接并且这些元素与该 A-F 匹配，我会为这些行添加一个名为 match 的类。我有一个突出显示的可见行，我将突出显示的重点行称为 on，并在该行中添加一个“on”类。上下将通过我剩余的结果在课堂上推动这一点。

问题是，如果我有 5 个匹配的元素，或者如果我点击全部显示，则有 10 个，我的容器中只显示 3 个。我需要将行移入和移出视图。我已经将其他不匹配的行设置为 display:none。

我的桌子。

<table id="data-container">
<thead><th>Name</th><th>Nickname</th></tr></thead>
<tbody>
<tr id="C1" class="matched on" filtercriteria="C"><td>Cameron</td><td>Cam</td></tr>
<tr id="D1" class="matched" filtercriteria="D"><td>Donnie</td><td>Don</td></tr>
<tr id="E1" class="matched" filtercriteria="E"><td>Edward</td><td>Ed</td></tr>
<tr id="J2" class="matched" filtercriteria="J"><td>James</td><td>Jimmy</td></tr>
<tr id="J3" class="matched" filtercriteria="J"><td>Johnny</td><td>John</td></tr>
<tr id="T22" class="matched" filtercriteria="T"><td>Timothy</td><td>Timmy</td></tr>
</table>
<a class="UP" href="javascript:void(0);">up</a>
<a class="DOWN" href="javascript:void(0);">down</a>
<a href="PICK" href="javascript:void(0);">pick</a>

我需要什么。 3 个或更多元素显示在一个仅适合 2 个元素的容器中，并带有一个上下链接，可以上下移动 on 类。匹配但在容器视图之外的项目项将旋转回视图中。单击选择链接时，设置为 on 的 tr 的 id 或当前突出显示的行将在下面的 div 上显示该数据。如果 on 选中的高亮当前在 #T22 的 tr 上，那么 Timmy 将显示在下面的 div 中。

你不能点击蒂莫西行，你必须使用上下和选择链接来选择它。

【问题讨论】：

不确定为什么投反对票？无论如何，任何可行的方法都可以，包括对我的数据和行使用轮播。

标签： javascript jquery css datatable

【解决方案1】：

您需要确定当前行是否是表中的第一个/最后一个子行，如果不是则执行行移位。

$("a.DOWN").click(function () {
    var currRow = $(".on");
    var lastRow = $('#data-container tr:last-child');

    if (currRow.attr("id") != lastRow.attr("id")) {
        ...
    }
});

完整演示：http://jsfiddle.net/3LLvx/

【讨论】：