Truy xuất các hàng trước và tiếp theo trong một bảng bằng cách sử dụng jQuery

Question

Tôi đang sử dụng ASP.NET để tạo một trang có GridView rất dễ chỉnh sửa cho người dùng cuối. Về cơ bản, tất cả các hàng chứa TextBox (thay vì văn bản tĩnh) mà người dùng có thể chỉnh sửa bất cứ khi nào anh ta muốn. Không có postback xảy ra bao giờ, trừ khi anh ta nhấp vào nút Save ở dưới cùng của trang. Sau đó, tôi lặp qua mỗi hàng trong lưới, lấy các giá trị trong các điều khiển trong mỗi hàng và lưu chúng trở lại cơ sở dữ liệu.

Tôi hiện đang cố gắng thực hiện hoán đổi hai hàng (để di chuyển hàng lên hoặc xuống) trong Javascript và tôi cần một số cách để truy xuất các hàng trước và tiếp theo trong bảng.

Hiện tại GridView của tôi chứa một HiddenField làm cột đầu tiên, chứa Id duy nhất của mục dữ liệu (tôi cần điều này để lưu trữ lại cơ sở dữ liệu). Đối với các mục đích khác (xóa liên tiếp) Tôi đã tìm ra cách để lấy Id này, đó là:

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

Có rất nhiều 'mẹ' gọi vì điều này xảy ra trong sự kiện click của một hình ảnh, đó là bên trong một LinkButton, nằm bên trong cột cuối cùng của lưới của tôi. Vì vậy, cha mẹ đầu tiên là LinkButton, tiếp theo là ô bảng và cuối cùng là hàng của bảng. Sau đó, tôi cho rằng hàm find(':input') trả về phần tử đầu vào đầu tiên trong hàng này (trong trường hợp của tôi là trường ẩn chứa id).

Vì vậy, sử dụng cùng một phương pháp tôi có thể nhận được hàng hiện:

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

Nhưng làm thế nào để tôi nhận được hàng trước và tiếp theo?

Ngoài ra, khi tôi có các hàng đó, tôi sẽ cần truy xuất các giá trị từ nhiều yếu tố đầu vào hơn. Tôi biết tôi có thể tìm số đầu tiên bằng cách sử dụng find(':input'), nhưng làm cách nào để tìm các yếu tố đầu vào thứ hai và thứ ba trong hàng của bảng này?

EDIT
Tôi không có bất kỳ html nào tại thời điểm này nhưng đây là ASP.NET đánh dấu cho lưới điện:

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

Và đây là một ví dụ về jQuery Tôi đang sử dụng:

$(document).ready(function() { 

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

Answer 1

Bạn có thể truy cập vào hàng bằng cách làm này:

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

Bây giờ bạn có hàng, bạn có thể nhận hàng tiếp theo/trước bằng cách thực hiện việc này:

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

Để chuyển các hàng xung quanh, bạn có thể sử dụng .detach() và .appendTo()

Answer 2

Theo như tôi hiểu bài viết của bạn var row = $(this).parent().parent().parent(); có thể được thay thế bằng

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

Ngoài ra, var itemHf = $(this).parent().parent().parent().find(':input'); có lẽ tốt hơn nên được thể hiện là

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

Vì vậy, để có được hàng trước, bạn sẽ sử dụng

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

và hàng tiếp theo sẽ là

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

Answer 3

I figured it out. Khi tôi có một hàng (hoặc hàng hiện tại hoặc hàng trước đó), tôi có thể tìm thấy phần tử đầu vào đầu tiên sử dụng cùng định dạng như trước. Sau đó, tôi có thể tìm thấy các tế bào gần nhất ('td'), gọi tiếp theo() trên đó và sau đó tìm thấy những yếu tố đầu vào đầu tiên một lần nữa:

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

Có thể có một cách tốt hơn, nhưng hoạt động này vì vậy tôi hạnh phúc với nó ngay bây giờ.

Nhờ sự giúp đỡ của bạn, vì một lý do tôi có thể không bao giờ khá nắm bắt các khái niệm về jQuery ...