使用 jQuery 检索表中的上一行和下一行 [英] Retrieve previous and next rows in a table using jQuery
问题描述
我正在使用 ASP.NET 创建一个带有 GridView 的页面，该页面对于最终用户来说是非常可编辑的.基本上，所有行都包含用户可以随时编辑的文本框(而不是静态文本).永远不会发生回发，除非他单击页面底部的保存"按钮.然后，我遍历网格中的每一行，检索每一行中控件中的值并将它们保存回数据库.
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.
我现在正在尝试在 Javascript 中实现交换两行(向上或向下移动一行)，为此我需要某种方法来检索表中的前一行和下一行.
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.
目前我的 GridView 包含一个 HiddenField 作为第一列，其中包含数据项的唯一 ID(当然我需要它来将它存储回数据库).出于其他目的(删除一行)，我想出了如何检索此 Id，即:
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');
有如此多的父"调用，因为这发生在 Image 的单击事件中，该事件位于 LinkButton 内，它位于我的网格的最后一列内.所以第一个父级是 LinkButton，下一个是表格单元格，最后是表格行.然后，我假设 find(':input') 函数返回该行中的第一个输入元素(在我的例子中是包含 id 的隐藏字段).
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).
所以，使用相同的方法我可以获得 current 行:
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?
此外，一旦我有了这些行，我将需要从更多输入元素中检索值.我知道我可以使用 find(':input') 找到第一个元素，但是如何在该表行中找到第二个和第三个输入元素?
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?
编辑
我此时没有任何 html，但这里是网格的 ASP.NET 标记:
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>
这是我正在使用的 jQuery 示例:
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);
});
});
推荐答案
您可以通过以下方式访问该行:
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();
要切换行，可以使用 .detach() 和 .appendTo()
To switch the rows around, you can use .detach() and .appendTo()
这篇关于使用 jQuery 检索表中的上一行和下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
