使用 jQuery 检索表中的上一行和下一行

Posted 2023-03-05

【中文标题】使用 jQuery 检索表中的上一行和下一行

【英文标题】：Retrieve previous and next rows in a table using jQuery

【发布时间】：2011-10-22 00:18:27

【问题描述】：

我正在使用 ASP.NET 创建一个带有 GridView 的页面，该页面对于最终用户来说是非常可编辑的。基本上，所有行都包含用户可以随时编辑的文本框（而不是静态文本）。除非他单击页面底部的“保存”按钮，否则不会发生回发。然后，我遍历网格中的每一行，检索每一行的控件中的值并将它们保存回数据库。

我现在正在尝试在 javascript 中实现交换两行（向上或向下移动一行），为此我需要一些方法来检索表中的前一行和下一行。

目前，我的 GridView 包含一个 HiddenField 作为第一列，其中包含数据项的唯一 ID（我当然需要它来将其存储回数据库）。出于其他目的（删除一行）我已经想出了如何检索这个 Id，它是这样的：

var itemHf = $(this).parent().parent().parent().find(':input');

有如此多的“父”调用，因为这发生在图像的单击事件中，该事件位于链接按钮内，位于网格的最后一列内。所以第一个父级是 LinkBut​​ton，下一个是表格单元格，最后是表格行。然后，我假设 find(':input') 函数返回该行中的第一个输入元素（在我的例子中是包含 id 的隐藏字段）。

所以，使用相同的方法我可以得到 current 行：

var row = $(this).parent().parent().parent();

但是如何获取上一行和下一行呢？

此外，一旦我有了这些行，我将需要从更多输入元素中检索值。我知道我可以使用find(':input') 找到第一个，但是如何在这个表格行中找到第二个和第三个输入元素？

编辑 我目前没有任何 html，但这里是网格的 ASP.NET 标记：

        <asp:GridView runat="server" ID="grid" AutoGenerateColumns="False" 
            onrowcommand="grid_RowCommand" onrowdeleting="grid_RowDeleting">
            <Columns>

                <!-- Move Up button -->
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton runat="server" OnClientClick="return false;">
                            <asp:Image ImageUrl="~/Images/moveUp.png" AlternateText="moveUp" runat="server" CssClass="moveUp" ID="moveUp" />
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                <!-- Move Down button -->
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton runat="server" OnClientClick="return false;">
                            <asp:Image ImageUrl="~/Images/moveDown.png" AlternateText="moveDown" runat="server" CssClass="moveDown" ID="moveDown" />
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>

                <!-- ID Hidden Field -->
                <asp:TemplateField>
                    <ItemTemplate>
                            <asp:HiddenField runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
                    </ItemTemplate>
                </asp:TemplateField>

                <!-- Name textbox field -->
                <asp:TemplateField HeaderText="Naam">
                    <ItemTemplate>
                            <asp:TextBox runat="server" Width="200px" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' />
                    </ItemTemplate>
                </asp:TemplateField>

                <!-- Price textbox field -->
                <asp:TemplateField HeaderText="Prijs">
                    <ItemTemplate>
                            <asp:TextBox runat="server" Width="50px" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' />
                    </ItemTemplate>
                </asp:TemplateField>

                <!-- Delete button -->
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton runat="server" OnClientClick="return false;">
                            <asp:Image ImageUrl="~/Images/delete.png" AlternateText="delete" runat="server" CssClass="delete" ID="delete" />
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

这是我正在使用的 jQuery 的一个示例：

    $(document).ready(function () 

        $('table td img.delete').click(function () 
            var id = $(this).closest('tr').find(':input').val();
            alert(id);
        );
    );

【问题讨论】：

如果您发布一些相应的 HTML 将会非常有帮助...

@Tomm 我发布了 ASP.NET（现在无法访问呈现的 html）以及我如何使用 jQuery。希望能帮助到你。我现在已经设法获取下一行和上一行，但现在我还需要检索该行上的下一个输入元素。我只找到第一个，但之后还有两个（当然不在同一列中，正如您从 asp.net 中看到的那样，所以我想我必须搜索开始'一个父母'？）跨度>

【参考方案1】：

您可以通过以下方式访问该行：

var row = $(this).closest('tr');

现在你有了行，你可以通过这样做获得下一个/前行：

var next = row.next();
var prev = row.prev();

要切换行，您可以使用.detach() 和.appendTo()

【讨论】：

谢谢，我现在设法检索下一行和上一行。我也可以使用分离和附加来移动它们（尽管它们似乎没有切换，一排似乎向上移动了两个位置，另一排似乎向下移动了几个位置，但这可能是我的错误）。但是，行仅在客户端移动；当我稍后在服务器端迭代GridView的Rows集合时，它以原始顺序返回它们，因此它也以原始顺序保存它们。

如果我可以交换输入中的实际值（在 Id 隐藏字段旁边有两个文本框），那么我认为它们会以新顺序保存。为此，我还需要能够找到下一个输入。我正在使用find(':input') 查找第一个输入，但我如何找到下一个？在这种情况下，我使用next() 没有运气，我尝试了几种变体，例如row.find(':input').next() 或row.find(':input').parent().next(':input')，但没有运气......

啊，不错；你解决了。您是否最终切换了各个值，或者您是否能够通过读取回发时的行 ID 来跟踪行顺序？

当我使用 detach 和 appendTo 交换行时，它们没有在回发后服务器上的 grid.Rows 集合中交换，所以我无法检测到移动的行。我最终做的是添加另一个隐藏字段列，在其中存储数据项的 SortId，然后交换它们。加载数据时，我只是按 SortId 排序，仅此而已。

如果您只是要再次附加 HTML 元素，则无需分离它。

【参考方案2】：

我想通了。一旦我得到一行（当前行或前一行），我可以使用与以前相同的格式找到第一个输入元素。然后我可以找到最近的单元格（'td'），调用 next() 然后再次找到第一个输入元素：

var row = $(this).closest('tr');
var idInput = row.find(':input');
var nextInput = idInput.closest('td').next('td').find(':input');

可能有更好的方法，但这很有效，所以我现在很满意。

感谢您的帮助，由于某种原因，我永远无法完全掌握 jQuery 的概念...

【参考方案3】：

据我了解，您的帖子 var row = $(this).parent().parent().parent(); 可以替换为

var row = $(this).parents("tr");

此外，var itemHf = $(this).parent().parent().parent().find(':input'); 可能会更好地表达为

var itemHf = $(this).parents('tr').find('input:first');

所以，要获取您将使用的上一行

var prevHf=$(this).parents('tr').prev().find('input:first');

下一行是

var nextHf=$(this).parents('tr').next().find('input:first');

【讨论】：

谢谢。我猜find('input:first') 明确地只返回第一个输入元素。如何获得第二个和第三个元素？

没关系，我明白了！顺便说一句，你的答案也很好，但我只能将一个标记为已接受的答案，对不起！