Skip to main content
本文に 1161 文字追加
ソース リンク
pgrho
  • 1.4万
  • 1
  • 15
  • 31

追記

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

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

追記

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

<!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>
ソース リンク
pgrho
  • 1.4万
  • 1
  • 15
  • 31

質問の記述では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とイベントの発生した要素にアクセスすることもできます。