javascript - 仅显示容器内的匹配行并旋转进出 View

Question

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

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

我正在使用 jQuery 开发一个 HTML5 页面。我的大部分组件都在正常工作。我只是缺少一个元素。我将描述我需要什么，希望你能帮助我实现目标。我省略了其中的一部分，因为它可能不符合我需要的片段和部分。

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

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

如果我单击我的 A-F 链接并且这些元素与该 A-F 相匹配，我将向这些行添加一个名为 matched 的类。我有一个突出显示的可见行，我将突出显示的聚焦行称为 on 并向该行添加一类“on”。上下移动将通过我剩余的结果在类里面移动。

问题是，如果我有 5 个匹配的元素，或者如果我单击“全部显示”则有 10 个，我只会在我的容器中显示 3 个。我需要将行移入和移出 View 。我已经将其他不匹配的行设置为显示:无。

我的 table 。

<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 个元素，并带有上下链接，可上下移动类。匹配但在容器 View 之外的元素将旋转回 View 。单击选择链接时，设置为打开的 tr 的 id 或当前突出显示的行将在下面的 div 上显示该数据。如果 on 的选定高亮当前位于 #T22 的 tr 上，那么 Timmy 将显示在下面的 div 中。

您不能单击 Timothy 行，您必须使用上下键和选择链接来选择它。

Answer 1

如果当前行是表中的第一个/最后一个子行，则需要在 UP/DOWN 单击时确定，如果不是则执行行移位。

$("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/