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

Question

我正在使用ASP.NET創建一個帶有最終用戶非常可編輯的GridView的頁面。基本上，所有行都包含TextBoxes（而不是靜態文本），用戶可以隨時編輯它們。除非他點擊頁面底部的保存按鈕，否則不會發生回發。然後，我遍歷網格中的每一行，檢索每行中控件的值並將它們保存回數據庫。

我現在試圖在Javascript中實現交換兩行（向上或向下移動一行），爲此我需要一些方法來檢索表中的前一行和下一行。

此刻，我的GridView包含一個HiddenField作爲第一列，其中包含數據項的唯一標識（我需要將其存儲回數據庫當然）。用於其他目的（刪除行），我已經找到了如何檢索此ID，它是這樣的：

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

有這麼多的「父」稱，因爲這發生在圖像的點擊事件，這是內部一個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()

Answer 2

據我瞭解您的文章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'); 

Answer 3

我想通了。一旦我得到一行（無論是當前行還是前一行），我都可以使用與以前相同的格式查找第一個輸入元素。然後，我可以找到最近的小區（「TD」），調用next（）上，然後再次找到第一個輸入元素：

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

有可能是一個更好的辦法，但這個作品，所以我很高興與它現在。

感謝您的幫助，由於某種原因，我決不能完全把握的jQuery的概念...