40037


====質問===  
table内の行に配置されたボタン要素押下で、当該tableの一番下の行=tr要素を取得したいのですが自分の未熟さから捉えられない状態です。下の図の緑枠のtr要素を変数$rowに格納したいのですが、どういった関数記述で達成できるのでしょうか？  
ちなみに、console.logに$(this).nextAll("table").eq(0).prop("tagName")を表してみたのですがundefinedになってしまいます。  
いつもながら初歩的な質問で申し訳ありませんがご支援をよろしくお願い致します。  
[![画像の説明をここに入力](https://i.stack.imgur.com/3XGF7.png)](https://i.stack.imgur.com/3XGF7.png)

[code]

    <div class="appLines">
            <table>
                <tr class="appLineDummy">
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            <tr >                       //動的生成
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            <tr >                       //動的生成
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            <tr >                       //動的生成
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            <tr >                       //動的生成
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            <tr >                       //動的生成
                    <td></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td class="extd"></td>
                    <td></td>
                    <td></td>
                    <td class="extd_kin"></td>
                    <td class="extd_kin"></td>
                    <td class="extd"></td>
                    <td><button class="rowins" type="button">+</button></td>
                    <td><button class="rowdel" type="button">-</button></td>
                </tr>
            </table>
        </div>
        <div class="appFooter">
            <table>
                <tr>
                    <td colspan="6"></td>
                    <td  colspan="2"></td>
                </tr>
            </table>
        </div>
    
[/code]

＝＝＝＝補足＝＝＝＝  
皆様、いつもご支援をありがとうございます。  
既存の関数 addRowBelow は行追加のために機能しており、こちらへ引数で行要素を指定すると  
その下に行が追加される想定でいます。（今話題にしてるボタンも、こちらから動的に生成されたtr要素上のボタン）  
問い合わせは、目的としている行要素を見つけるための手立てでしたが、  
こちらの関数に引数で渡すための問い合わせでした。

．．．でも相変わらずうまくいかない状況で、ちょっと困っています。（前方がpgrhoさん参考、後方がyyzさんを参考）引き続き
ご見解を頂けますと幸いでございます、よろしくお願い致します。

[code]

    var $dummyRow = $("tr.appLineDummy");  //漏れてました．．．
    
    function addRowBelow($ele) {
        var $newRow = $dummyRow.clone(true);
        $newRow.removeClass("appLineDummy");
        $newRow.insertAfter($ele);
    }
    
[/code]

【無反応になってしまいます】

[code]

    // 行削除 & 行の補い（常に5行表示を保つ意味））
    $(document).on("click", ".rowdel", function(e) {
        var row = $(this).closest("tr").remove();
        $(row).remove();
    
    
        $row = $(this).closest('table').find('tr:last');
        addRowBelow($row);
    });
    
[/code]

【当該Ｗｅｂページ一番下に行追加されてしまう（ボタンが配置されたtrを含むテーブルの一番下が希望）】

[code]

    // 行削除 & 行の補い（常に5行表示を保つ意味））
    $(document).on("click", ".rowdel", function(e) {
        var row = $(this).closest("tr").remove();
        $(row).remove();
    
        var table_no = $('table').index($(this));
        addRowBelow($('table:eq('+table_no+') tr:last'));
    
    });
    
[/code]


CC BY-SA 3.0
2017-12-01T13:30:34.263
39968
2017-12-05T01:34:40.493
2017-12-04T23:21:33.997
25696
25696
question
jquery html5
JQuery　要素を思うように捉えられない


質問の記述では`this`が何かはっきりしませんが、クリックされた`<button>`要素だとすると

[code]

    $(this).closest('table')
    
[/code]

で`<button>`の上位にある`<table>`を得ることができます。この要素に対して`tr:last`を探せばよいので結局

[code]

    $(this).closest('table').find('tr:last')
    
[/code]

で最下行を取得することができます。

しかし`<tbody>`の末尾に`<tr>`を追加するだけであれば`tr:last`にアクセスする必要は特にないように思われます。

[code]

    $(this).closest('tbody').append(/* 追加するtr */);
    
[/code]

なお`this`が他のオブジェクトであっても引数から`event.currentTarget`とイベントの発生した要素にアクセスすることもできます。

## 追記

一応下記のソースで問題なく動くことを確認しました。質問文では明示されていない箇所で例外が発生しているのでは。ブラウザのコンソールを確認してみてください。

[code]

    <!DOCTYPE html>
    <html>
    <body>
        <table>
            <tr class="appLineDummy">
                <td><button class="rowins">+</button></td>
            </tr>
        </table>
        <table>
            <tr>
                <td><button class="rowins">+</button></td>
            </tr>
        </table>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script>
            var i = 0;
            var $dummyRow = $('.appLineDummy'); // なかったので追加
            function addRowBelow($ele) {
                var $newRow = $dummyRow.clone(true);
                $newRow.removeClass("appLineDummy");
                $newRow.append($('<td>').text(i++)); // 結果確認用
                $newRow.insertAfter($ele);
            }
    
            // 行を動的に追加しているのでライブイベントを使用する
            $(document.body).on("click", ".rowins", null, function () {
                $row = $(this).closest('table').find('tr:last');
                addRowBelow($row);
            });
        </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-12-02T04:00:10.070
39972
2017-12-04T13:39:29.650
2017-12-04T13:39:29.650
5750
5750
39968
answer


以下のように、追加してから削除してみましょう。

[code]

    // 行を動的に追加しているのでライブイベントを使用する
    $(document.body).on("click", ".rowins", null, function () 
    {
        //追加
        var row2 = $(this).closest('table').find('tr:last');
        addRowBelow(row2);
    
        //削除
        var row = $(this).closest("tr").remove();
        $(row).remove();
    });
    
[/code]

saya24さんがされている以下の文だと、先に削除されているせいで、thisの指すボタンがテーブルから外れ、closestで失敗しているのかもしれません。

[code]

    // 行削除 & 行の補い（常に5行表示を保つ意味））
    $(document).on("click", ".rowdel", function(e) {
        var row = $(this).closest("tr").remove();
        $(row).remove();
    
        $row = $(this).closest('table').find('tr:last');
        addRowBelow($row);
    });
    
[/code]

お試しください。


CC BY-SA 3.0
2017-12-05T01:34:40.493
40037
2017-12-05T01:34:40.493
17014
39968
answer