jquery - jqueryを使用してhtmlテーブルに新しい行を動的に追加する方法

Question

ここに画像の説明を入力

私のhtmlテーブルにはいくつかの入力要素があります。ユーザーが最後の年齢列を埋めた後にEnterボタンを押すたびに、テーブルの最後に入力要素の新しい行を挿入したいと思います。写真が物事をより明確にすることを願っています..私はjqueryが初めてなので、jqueryを使用することは可能ですか. どんな種類の助けにも感謝します..

score 4 · Accepted Answer

テーブルのhtml構造を推測すると、一般的な考え方は次のようになります。

$('input.last').keyup(function handleEnter(e){
    //enter hit on the input that has class last
    if(e.which == 13) {

       $(this).removeClass('last').unbind('keyup');

       $('.myTable').append('<tr><td><input name="input1"/></td><td><input name="input1"/> </td><td><input name="input1" class="last"/></td></tr>');

       $('.last').keyup(handleEnter);
    }
});

score 3 · Accepted Answer

最後の行の最後の列を jquery のセレクターとして使用します。onclick イベントを起動し、テーブルの最後に新しい tr を追加します

コードはこちら

 <script>
            $(document).ready(function () {

                $('#tableId tr:last td:last').click(function () {
                    var tr = $('this').closest('tr');
                    $('#tableId').append(tr);
                });
            });
        </script>