仅显示容器内匹配的行，并旋转进入和移出视图

Display Only Matched Rows Within a Container and Rotate into and Out Of View

本文关键字：旋转 视图 移出 显示      更新时间：2023-09-26

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

分叉版本更近，上下移动。 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 匹配，我会添加一个名为 match 的类到这些行。 我有一个突出显示的可见行，我将突出显示的焦点行称为 on，并向该行添加一类"on"。 上下将通过我剩余的结果在课堂上移动它。

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

我的桌子。

<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 的选定突出显示当前位于 tr of #T22 则 Timmy 将显示在下面的div 中。

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

您需要

在向上/向下单击时确定当前行是否是表上的第一个/最后一个子行，并且仅在不是时才执行行移位。

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

相关文章：