Получить предыдущую и следующую строки в таблице с помощью jQuery

Question

Я использую ASP.NET для создания страницы с GridView, которая очень редактируема для конечного пользователя.По сути, все строки содержат текстовые поля (вместо статического текста), которые пользователь может редактировать в любое время.Никакой обратной передачи не происходит, за исключением случаев, когда он нажимает кнопку «Сохранить» внизу страницы.Затем я перебираю каждую строку в сетке, извлекаю значения в элементах управления в каждой строке и сохраняю их обратно в базу данных.

Сейчас я пытаюсь осуществить свопинг двух строк (чтобы переместить строку вверх иливниз) в Javascript, и для этого мне нужен какой-то способ извлечения предыдущей и следующей строк в таблице.

На данный момент мой GridView содержит HiddenField в качестве первого столбца, который содержит уникальный идентификатор данныхпункт (мне нужно это, чтобы сохранить его обратно в базу данных, конечно).Для других целей (удаление строки) я выяснил, как получить этот идентификатор, а именно:

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

Существует так много «родительских» вызовов, потому что это происходит в событии click изображения, котороенаходится внутри LinkButton, которая находится внутри последнего столбца моей сетки.Таким образом, первый родительский элемент - LinkButton, следующий - ячейка таблицы и, наконец, строка таблицы.Затем, я полагаю, функция find(':input') возвращает первый элемент ввода в этой строке (который в моем случае является скрытым полем, содержащим идентификатор).

Итак, используя тот же метод, я могу получить current row:

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();

Toпереключать строки, вы можете использовать .detach() и .appendTo()

Answer 2

Я понял это. Как только я получил строку (текущую или предыдущую), я могу найти первый элемент ввода, используя тот же формат, что и раньше. Затем я могу найти ближайшую ячейку ('td'), вызвать для нее next (), а затем снова найти первый элемент ввода:

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

Возможно, есть лучший способ, но это работает, поэтому я доволен этим пока.

Спасибо за вашу помощь, по некоторым причинам я никогда не могу полностью понять концепции jQuery ...

Answer 3

Насколько я понимаю, ваш пост 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');