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

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

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

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

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

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

так, используя тот же метод, я могу получить настоящее строку:

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

3 ответов


вы можете получить доступ к строке, делая это:

var row = $(this).closest('tr');

теперь, когда у вас есть строка, вы можете получить следующую / pre строку, сделав это:

var next = row.next();
var prev = row.prev();

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


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

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

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

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


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