1

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

<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>

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

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

var $dummyRow = $("tr.appLineDummy");  //漏れてました...

function addRowBelow($ele) {
    var $newRow = $dummyRow.clone(true);
    $newRow.removeClass("appLineDummy");
    $newRow.insertAfter($ele);
}

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

// 行削除 & 行の補い(常に5行表示を保つ意味))
$(document).on("click", ".rowdel", function(e) {
    var row = $(this).closest("tr").remove();
    $(row).remove();


    $row = $(this).closest('table').find('tr:last');
    addRowBelow($row);
});

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

// 行削除 & 行の補い(常に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'));

});
11
  • 1
    HTML部分も画像でなくテキストでアップ下さい。
    – BLUEPIXY
    Commented 2017年12月1日 13:32
  • var table_no = $('table').index($(this).parent().parent().parent().parent()); var last_tr = $('table:eq('+table_no+') tr:last').prop("outerHTML");
    – yyz
    Commented 2017年12月1日 20:52
  • BLUEPIXY様 失礼しました。HTMLを追加しました
    – saya24
    Commented 2017年12月4日 0:17
  • @yyz いつもご親切・迅速な対応をありがとうございます。回答覧に現在生じている問題を追記させて頂きました。ご確認頂けましたら幸いです。
    – saya24
    Commented 2017年12月4日 2:02
  • 質問への補足は質問に追記してください……
    – hinaloe
    Commented 2017年12月4日 2:05

2 件の回答 2

4

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

$(this).closest('table')

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

$(this).closest('table').find('tr:last')

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

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

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

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

追記

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

<!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>
2
  • ご丁寧な説明まことにありがとうございます。pgrhoさんのaddRowBelow($row)の直前にalert($row‌​.prop("tagName"));を試‌​しに挿入すると、しっかりTRの文字が現れ‌​ましたが、当方の場合はやはりundefi‌​nedになってしまいます。頭が痛くなってきました
    – saya24
    Commented 2017年12月5日 0:02
  • 最初からコードを漏れなく開示していれば皆様にご迷惑をおかけしていなかったと思います、申し訳ございませんでした。
    – saya24
    Commented 2017年12月5日 2:07
1

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

// 行を動的に追加しているのでライブイベントを使用する
$(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();
});

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

// 行削除 & 行の補い(常に5行表示を保つ意味))
$(document).on("click", ".rowdel", function(e) {
    var row = $(this).closest("tr").remove();
    $(row).remove();

    $row = $(this).closest('table').find('tr:last');
    addRowBelow($row);
});

お試しください。

1
  • ご見解をありがとうございました。ばっちりです。皆様の暖かいご支援に本当に感謝を申し上げたいです。
    – saya24
    Commented 2017年12月5日 2:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。