Recupere filas anteriores y siguientes en una tabla usando jQuery

Question

Estoy usando ASP.NET para crear una página con un GridView que sea muy editable para el usuario final. Básicamente, todas las filas contienen TextBoxes (en lugar de texto estático) que el usuario puede editar cuando lo desee. No se produce devolución alguna vez, excepto cuando hace clic en el botón Guardar en la parte inferior de la página. Luego, recorro cada fila en la grilla, recupero los valores en los controles en cada fila y los guardo de nuevo en la base de datos.

Ahora estoy tratando de implementar el intercambio de dos filas (para mover una fila hacia arriba o hacia abajo) en Javascript, y para eso necesito alguna forma de recuperar las filas anterior y siguiente en una tabla.

Por el momento, mi GridView contiene un HiddenField como la primera columna, que contiene el identificador único del elemento de datos (necesito esto para almacenarlo de nuevo en la base de datos, por supuesto). Para otros fines (eliminación de una fila) he descubierto la manera de recuperar este ID, que es la siguiente:

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

Hay tantos 'padre' llama porque esto sucede en el evento click de una imagen, que se encuentra dentro un LinkButton, que está dentro de la última columna de mi grilla. Entonces, el primer padre es el LinkButton, el siguiente es la celda de la tabla y finalmente la fila de la tabla. Entonces, supongo que la función find(':input') devuelve el primer elemento de entrada en esta fila (que en mi caso es el campo oculto que contiene el id.).

Por lo tanto, utilizando el mismo método que puedo conseguir la fila actual :

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

Pero ¿cómo puedo obtener las filas anteriores y siguientes?

Además, una vez que tenga esas filas, tendré que recuperar los valores de más elementos de entrada. Sé que puedo encontrar el primero usando find(':input'), pero ¿cómo puedo encontrar el segundo y el tercer elemento de entrada en esta fila de la tabla?

EDIT
No tengo ningún html en este momento, pero aquí está el ASP.NET marcado para la red:

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

Y aquí es un ejemplo de la jQuery que estoy usando:

$(document).ready(function() { 

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

Answer 1

Se puede acceder a la fila al hacer esto:

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

Ahora que tiene la fila, puede obtener la fila siguiente/previa haciendo esto:

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

Para cambiar de sitio las filas, puede utilizar .detach() y .appendTo()

Answer 2

Por lo que yo entiendo tu post var row = $(this).parent().parent().parent(); podría sustituirse por

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

Además, var itemHf = $(this).parent().parent().parent().find(':input'); probablemente sería mejor expresarlo como

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

Por lo tanto, para obtener la fila anterior se usaría

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

y la siguiente fila habría

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

Answer 3

lo he descubierto. Una vez que obtuve una fila (la fila actual o la fila anterior), puedo encontrar el primer elemento de entrada usando el mismo formato que antes. Entonces puedo encontrar la celda más cercana ('td'), llame a next() en eso y luego encontrar el primer elemento de entrada de nuevo:

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

Puede haber una mejor manera, pero esto funciona así que estoy feliz con eso por ahora.

Gracias por su ayuda, por alguna razón que nunca se puede entender los conceptos de jQuery ...