web-dev-qa-db-ja.com

jQueryを使用してテーブルの前の行と次の行を取得する

ASP.NETを使用して、エンドユーザーが非常に編集しやすいGridViewを使用してページを作成しています。基本的に、すべての行には、ユーザーがいつでも編集できるTextBox（静的テキストではなく）が含まれています。ページの下部にある[保存]ボタンをクリックする場合を除いて、ポストバックは発生しません。次に、グリッドの各行をループし、各行のコントロールの値を取得して、データベースに保存します。

私は現在、Javascriptで2つの行の交換（行を上下に移動するため）を実装しようとしています。そのために、テーブル内の前の行と次の行を取得する方法が必要です。

現時点では、GridViewの最初の列にHiddenFieldが含まれています。この列には、データ項目の一意のIDが含まれています（もちろん、データベースに保存するためにこれが必要です）。他の目的（行の削除）のために、このIDを取得する方法を理解しました。これは次のとおりです。

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

これは、グリッドの最後の列内にあるLinkBut​​ton内にあるImageのクリックイベントで発生するため、非常に多くの「親」呼び出しがあります。したがって、最初の親はLinkBut​​ton、次はテーブルセル、最後にテーブル行です。次に、find(':input')関数がこの行の最初の入力要素（私の場合はidを含む非表示フィールド）を返すと仮定します。

だから、同じ方法を使用して私は得ることができます 電流 行：

_var row = $(this).parent().parent().parent();
_

しかし、どうすれば前の行と次の行を取得できますか？

また、これらの行を取得したら、より多くの入力要素から値を取得する必要があります。 find(':input')を使用して最初の要素を見つけることができることはわかっていますが、このテーブル行の2番目と3番目の入力要素を見つけるにはどうすればよいですか？

編集
現時点では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);
        });
    });
_
javascriptjqueryasp.nethtml-tablerow
10
Nick Thissen

これを行うことにより、行にアクセスできます。

_var row = $(this).closest('tr');
_

行ができたので、次のようにして次/前の行を取得できます。

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

行を切り替えるには、.detach()および.appendTo()を使用できます。

27
rkw

私はそれを考え出した。行（現在の行または前の行のいずれか）を取得すると、以前と同じ形式を使用して最初の入力要素を見つけることができます。次に、最も近いセル（ 'td'）を見つけ、そのセルでnext（）を呼び出してから、最初の入力要素をもう一度見つけます。

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

もっと良い方法があるかもしれませんが、これはうまくいくので、今のところ満足しています。

あなたの助けに感謝します、何らかの理由で私はjQueryの概念を完全に理解することは決してできません...

2
Nick Thissen

私が理解している限り、あなたの投稿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');
_
1
Tomm