使用jQuery检索表中的上一行和下一行
我正在使用ASP.NET创建一个具有GridView的页面,该页面对最终用户非常可编辑。 基本上,所有行都包含TextBoxes(而不是静态文本),用户可以随时编辑它们。 除非他单击页面底部的“保存”按钮,否则不会发生回发。 然后,我遍历网格中的每一行,检索每行控件中的值并将它们保存回数据库。
我现在正在尝试在Javascript中实现交换两行(向上或向下移动一行),为此我需要一些方法来检索表中的上一行和下一行。
目前,我的GridView包含一个HiddenField作为第一列,其中包含数据项的唯一ID(我需要将其存储回数据库当然)。 出于其他目的(删除一行),我已经找到了如何检索此ID,这是:
var itemHf = $(this).parent().parent().parent().find(':input');
有这么多“父”调用,因为这发生在Image的click事件中,该事件位于LinkButton内部,它位于网格的最后一列内。 所以第一个父是LinkButton,下一个是表格单元格,最后是表格行。 然后,我想find(':input')
函数返回此行中的第一个输入元素(在我的例子中是包含id的隐藏字段)。
所以,使用相同的方法,我可以得到当前行:
var row = $(this).parent().parent().parent();
但是如何获得上一行和下一行呢?
此外,一旦我有这些行,我将需要从更多的输入元素中检索值。 我知道我可以使用find(':input')
找到第一个,但是如何找到此表行中的第二个和第三个输入元素?
编辑
我目前没有任何HTML,但这里是网格的ASP.NET标记:
<asp:HiddenField runat="server" Value='' /> <asp:TextBox runat="server" Width="200px" Text='' /> <asp:TextBox runat="server" Width="50px" Text='' />
这是我正在使用的jQuery的一个例子:
$(document).ready(function () { $('table td img.delete').click(function () { var id = $(this).closest('tr').find(':input').val(); alert(id); }); });
您可以通过执行以下操作来访问该行:
var row = $(this).closest('tr');
现在你有了这行,你可以通过这样做获得下一个/前一行:
var next = row.next(); var prev = row.prev();
要切换行,可以使用.appendTo()
和.appendTo()
我想到了。 一旦我得到一行(当前行或前一行),我可以使用与以前相同的格式找到第一个输入元素。 然后我可以找到最近的单元格(’td’),在其上调用next()然后再次找到第一个输入元素:
var row = $(this).closest('tr'); var idInput = row.find(':input'); var nextInput = idInput.closest('td').next('td').find(':input');
可能有更好的方法,但是这样可行,所以我现在很高兴。
感谢您的帮助,出于某种原因,我永远无法理解jQuery的概念……
据我所知你的postvar 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');