Javascript 使用 jQuery 检索表中的上一行和下一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6976137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve previous and next rows in a table using jQuery
提问by Nick Thissen
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.
我正在使用 ASP.NET 创建一个带有 GridView 的页面，该页面对于最终用户来说是非常可编辑的。基本上，所有行都包含用户可以随时编辑的文本框（而不是静态文本）。永远不会发生回发，除非他单击页面底部的“保存”按钮。然后，我遍历网格中的每一行，检索每一行中控件中的值并将它们保存回数据库。
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.
我现在正在尝试在 Javascript 中实现交换两行（向上或向下移动一行），为此我需要某种方法来检索表中的前一行和下一行。
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:
目前，我的 GridView 包含一个 HiddenField 作为第一列，其中包含数据项的唯一 ID（当然，我需要将其存储回数据库）。出于其他目的（删除一行），我想出了如何检索此 Id，即：
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).
有很多“父”调用，因为这是在 Image 的单击事件中发生的，该事件位于 LinkButton 内，位于网格的最后一列内。所以第一个父级是 LinkButton，下一个是表格单元格，最后是表格行。然后，我假设该 find(':input')函数返回该行中的第一个输入元素（在我的例子中是包含 id 的隐藏字段）。
So, using the same method I can get the currentrow:
因此，使用相同的方法我可以获得当前行：
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?
此外，一旦我有了这些行，我将需要从更多输入元素中检索值。我知道我可以使用 找到第一个find(':input')，但是如何在该表行中找到第二个和第三个输入元素？
EDIT
I don't have any html at this time but here is the ASP.NET markup for the grid:
编辑
我此时没有任何 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>
And here is an example of the jQuery I'm using:
这是我正在使用的 jQuery 示例：
$(document).ready(function () {
$('table td img.delete').click(function () {
var id = $(this).closest('tr').find(':input').val();
alert(id);
});
});
回答by rkw
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()
要切换行，您可以使用.detach()和.appendTo()
回答by Nick Thissen
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:
我想到了。一旦我得到一行（当前行或前一行），我可以使用与以前相同的格式找到第一个输入元素。然后我可以找到最近的单元格（'td'），调用 next() 然后再次找到第一个输入元素：
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...
感谢您的帮助，出于某种原因，我永远无法完全掌握 jQuery 的概念...
回答by Tomm
As far as I understand your post var row = $(this).parent().parent().parent();could be replaced with
据我了解，您的帖子var row = $(this).parent().parent().parent();可以替换为
var row = $(this).parents("tr");
Furthermore var itemHf = $(this).parent().parent().parent().find(':input');would probably better be expressed as
此外var itemHf = $(this).parent().parent().parent().find(':input');可能更好地表示为
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');
