javascript - 如何使用 "which"克隆带有 keydown 输入的表行？

Question

当您在姓氏输入字段上按 Tab 键时，我试图克隆表格的最后一行并将其附加到表格中，并使用空白值。所以我写了下面的代码。它工作得很好，直到您到达第二行，如果它是克隆，它似乎不会克隆并附加该行。有没有办法解决这个问题/我做错了什么？

    $(document).ready(function() {
        var $last_name = $('.last_name');
        var $blank_row = $('tr:last');
        var $time_table = $('#time_table');
        
        $last_name.keydown(function(e) {
            if (e.which === 9) {
            $blank_row.clone().find('input').val('').end().appendTo($time_table);
            }
        });                
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="time_table">
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Rate</th>
        <th class="time">ST</th>
        <th class="time">TH</th>
        <th class="time">DT</th>
        <th class="time">EX-ST</th>
        <th class="time">EX-TH</th>
        <th class="time">EX-DT</th>
    </tr>
    <tr class="blank_row">
        <td><input type="text" name="last_name" class="last_name"></td>
        <td><input type="text" name="first_name"></td>
        <td><input type="text" name="rate"></td>
        <td><input type="number" name="st" class="time_input"></td>
        <td><input type="number" name="th" class="time_input"></td>
        <td><input type="number" name="dt" class="time_input"></td>
        <td><input type="number" name="ex_st" class="time_input"></td>
        <td><input type="number" name="ex_th" class="time_input"></td>
        <td><input type="number" name="ex_dt" class="time_input"></td>
    </tr>
</table>

Answer 1

因为 .last_name 是动态添加的 — 变量 $last_name 存储对第一个空行的引用。

https://api.jquery.com/on/

    $(document).ready(function() {
        var $time_table = $('#time_table');
        
        $time_table.on('keydown', '.last_name', function(e) {
            if (e.which === 9) {
            $('tr:last').clone().find('input').val('').end().appendTo($time_table);
            }
        });                
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="time_table">
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Rate</th>
        <th class="time">ST</th>
        <th class="time">TH</th>
        <th class="time">DT</th>
        <th class="time">EX-ST</th>
        <th class="time">EX-TH</th>
        <th class="time">EX-DT</th>
    </tr>
    <tr class="blank_row">
        <td><input type="text" name="last_name" class="last_name"></td>
        <td><input type="text" name="first_name"></td>
        <td><input type="text" name="rate"></td>
        <td><input type="number" name="st" class="time_input"></td>
        <td><input type="number" name="th" class="time_input"></td>
        <td><input type="number" name="dt" class="time_input"></td>
        <td><input type="number" name="ex_st" class="time_input"></td>
        <td><input type="number" name="ex_th" class="time_input"></td>
        <td><input type="number" name="ex_dt" class="time_input"></td>
    </tr>
</table>