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

Question

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

我现在正在尝试在Javascript中实现交换两行(向上或向下移动一行),为此我需要一些方法来检索表中的上一行和下一行.

目前,我的GridView包含一个HiddenField作为第一列,其中包含数据项的唯一ID(我需要将其存储回数据库当然).出于其他目的(删除一行),我已经找到了如何检索此ID,这是:

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

有这么多"父"调用,因为这发生在Image的click事件中,该事件位于LinkBut​​ton中,它位于网格的最后一列内.所以第一个父亲是LinkBut​​ton,下一个是表格单元格,最后是表格行.然后,我想该 find(':input')函数返回此行中的第一个输入元素(在我的例子中是包含id的隐藏字段).

所以,使用相同的方法,我可以得到当前行:

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

Answer 1

您可以通过执行以下操作来访问该行:

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

现在你有了这行,你可以通过这样做得到下一行/前一行:

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

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