Retrieve previous and next rows in a table using jQuery

Question

I am using ASP.NET to create a page with a GridView that is very editable for the end user. Basically, all rows contain TextBoxes (instead of static text) which the user can edit whenever he wants. No postback occurs ever, except when he clicks the Save button on the bottom of the page. Then, I loop through each row in the grid, retrieve the values in the controls in each row and save them back to the database.

I am now trying to implement swapping two rows (to move a row up or down) in Javascript, and for that I need some way to retrieve the previous and next rows in a table.

At the moment my GridView contains a HiddenField as the first column, which contains the unique Id of the data item (I need this to store it back to the database of course). For other purposes (deleting a row) I have figured out how to retrieve this Id, which is this:

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

There's so many 'parent' calls because this happens in the click event of an Image, which is inside a LinkButton, which is inside the last column of my grid. So the first parent is the LinkButton, the next is the table cell, and finally the table row. Then, I suppose the find(':input') function returns the first input element in this row (which in my case is the hidden field that contains the id).

So, using the same method I can get the current row:

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

But how do I get the previous and next rows?

Also, once I have those rows, I will need to retrieve values from more input elements. I know I can find the first one using find(':input'), but how do I find the second and the third input elements in this table row?

EDIT
I don't have any html at this time but here is the ASP.NET markup for the grid:

        <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>

And here is an example of the jQuery I'm using:

    $(document).ready(function () {

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

Answer 1

You can access the row by doing this:

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

Now that you have the row, you can get the next/pre row by doing this:

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

To switch the rows around, you can use .detach() and .appendTo()

Answer 2

I figured it out. Once I got a row (either the current row or the previous row), I can find the first input element using the same format as before. Then I can find the closest cell ('td'), call next() on that and then find the first input element again:

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

There might be a better way, but this works so I'm happy with it for now.

Thanks for your help, for some reason I can never quite grasp the concepts of jQuery...

Answer 3

As far as I understand your post var row = $(this).parent().parent().parent(); could be replaced with

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

Furthermore var itemHf = $(this).parent().parent().parent().find(':input'); would probably better be expressed as

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

So, to get the previous row you would use

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

and the next row would be

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