检索使用jQuery表previous和下一行 [英] Retrieve previous and next rows in a table using jQuery
问题描述
我使用ASP.NET与一个GridView是对最终用户非常编辑创建页面。基本上，所有的行包含文本框（而非静态文本），其时，他希望用户可以编辑。无回传出现过，他点击页面底部的保存按钮时除外。然后，我循环通过在网格的每一行，检索在每一行中的控制值，并将其保存到数据库中。
我现在想实现交换两行的JavaScript（向上或向下移动一行），为此，我需要一些方法来检索表中的previous和下一行。
目前我的GridView控件包含HiddenField作为第一列，它包含了数据项的唯一ID（我需要这将其存储回当然数据库）。对于其他目的（删除行）我已经找到了如何获取这个ID，它是这样的：
VAR itemHf = $（本）.parent（）父（）父（）找到。（'：输入'）;
有这么多的父称，因为这种情况发生在图像的点击事件，这是一个LinkButton，这是我网格的最后一列内内。所以第一个父LinkButton的，接下来就是表格单元格，最后表行。于是，我想了找到（'：输入'）函数返回该行的第一个输入元素（在我的情况是包含ID的隐藏字段）
所以，用同样的方法我可以得到电流行：
VAR行= $（本）.parent（）父（）父（）。
但我怎么拿到previous和明年行？
此外，一旦我有这些行，我需要从更多的投入要素检索值。我知道我可以使用找到第一个找？（'：输入'），但我怎么找到第二，这个表行中的第三个输入元素
感谢您的帮助！
编辑
我没有在这个时候任何HTML，但这里是ASP.NET标记为网格：
＆LT; ASP：GridView控件=服务器ID =网格的AutoGenerateColumns =FALSE
onrowcommand =grid_RowCommandonrowdeleting =grid_RowDeleting＆GT;
＆LT;柱体和GT; ＆LT;！ - 移按钮 - ＆GT;
＆LT; ASP：的TemplateField＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：LinkButton的=服务器的OnClientClick =返回false;＆GT;
＆LT; ASP：图像的ImageUrl =〜/图片/ moveUp.png还有AlternateText =为moveUp=服务器的CssClass =为moveUpID =为moveUp/＆GT;
＆LT; / ASP：LinkButton的＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT; ＆LT;！ - 下移按钮 - ＆GT;
＆LT; ASP：的TemplateField＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：LinkButton的=服务器的OnClientClick =返回false;＆GT;
＆LT; ASP：图像的ImageUrl =〜/图片/ moveDown.png还有AlternateText =下移=服务器的CssClass =下移ID =下移/＆GT;
＆LT; / ASP：LinkButton的＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT; ＆LT;！ - ID隐藏字段 - ＆GT;
＆LT; ASP：的TemplateField＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：HiddenField =服务器值='＆LT;％＃DataBinder.Eval的（的Container.DataItem，ID）％GT;' /＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT; ＆LT;！ - Name文本字段 - ＆GT;
＆LT; ASP：的TemplateField的HeaderText =纳摩＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：文本框=服务器WIDTH =200像素文本='＆LT;％＃DataBinder.Eval的（的Container.DataItem，姓名）％＆GT;' /＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT; ＆LT;！ - 价格文本字段 - ＆GT;
＆LT; ASP：的TemplateField的HeaderText =prijs大奖＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：文本框=服务器WIDTH =50像素文本='＆LT;％＃DataBinder.Eval的（的Container.DataItem，价格）％＆GT;' /＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT; ＆LT;！ - 删除按钮 - ＆GT;
＆LT; ASP：的TemplateField＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：LinkButton的=服务器的OnClientClick =返回false;＆GT;
＆LT; ASP：图像的ImageUrl =〜/图片/ delete.png还有AlternateText =删除=服务器的CssClass =删除ID =删除/＆GT;
＆LT; / ASP：LinkButton的＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT;
＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT;
这是我使用jQuery的例子：
$（文件）。就绪（函数（）{ $（'表TD img.delete'）。点击（函数（）{
。VAR ID = $（本）.closest（'TR'）找到（'：输入'）VAL（）;
警报（ID）;
}）;
}）;
您可以通过做这个访问的行：
VAR行= $（本）.closest（'TR'）;
现在，你有行，你可以这样获得下/ pre行：
VAR下一= row.next（）;
。VAR preV =行preV（）;
要切换周围的行，你可以使用 .detach（）和 .appendTo（）
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.
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.
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');
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).
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?
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?
Thanks for any help!
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>
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();
To switch the rows around, you can use .detach() and .appendTo()
这篇关于检索使用jQuery表previous和下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
