javascript - 自动复制表中的最后一行

Question

当用户在最后一行中输入任何输入时，我想复制 HTML 表格中的最后一行。

我的代码仅在第一次运行时有效。

也许上面的表格正在干扰它？我还更换了:

if ( $(this).parents("tr").is("tr:last")) {

与

if ($(this).closest("tr").is(":last-child")) {

但这只会导致在任何输入上创建一个新行。 变量“t”可能已关闭。我缩小了表格的大小并目视数字。

<小时/>

Javascript 和 Jquery

function deleteRow(row) {
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById("Items").deleteRow(i);
}
function duperow() {
    document.getElementById("LastRow").value = (Number($("tr:last td:first").text()) + 1);
    var x = document.getElementById('Items');
    var new_row = x.rows[1].cloneNode(true);
    var len = (Number($("tr:last td:first").text()) + 1);
    new_row.cells[0].innerHTML = len;
    var inp = [];
    for (t = 1; t < 4; t += 1) { 
        inp[t] = new_row.cells[t].querySelectorAll("input,select")[0];
        inp[t].id += len;
        inp[t].value = "";
    }
    inp[3].value = "0.00";
    x.appendChild(new_row);
}
$(document).ready(function () {
    $("input").keydown(function () {
        if ( $(this).parents("tr").is("tr:last")) {
            duperow();
        }
    });
});

HTML

<form id="test" action="submit.php" method="post"  accept-charset="ISO-8859-1" enctype="multipart/form-data">
<table width="40%" class="alpha" cellpadding="6px" cellspacing="0" border="0" >
    <tr>
        <td>
            <p>Supplier Name:</p><input name="suplname" type="text" id="suplname" name="suplname" size="10" maxlength="30" required/>
        </td>
        <td>
            <p>Contact:</p><input name="contact" type="text" id="contact" name="contact" size="10" maxlength="40" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <p>Address:</p><input name="address" type="text" id="address" name="address" size="10" maxlength="30" />
        </td>
        <td>
            <input style="display: none;" name="LastRow" type="hidden" id="LastRow" name="LastRow" size="4" maxlength="4" />
        </td>
    </tr>
</table>
<table class="beta" id="Items" border="1" width="50%" cellpadding="6px" cellspacing="0" border="0" >
<tr>
    <th style="display: none;">ID</th>
    <th>Acct#</th>
    <th>Qty.</th>
    <th>Price</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
</tr>
<tr>
     <td style="display: none;">1</td>
     <td><select name="acct" id="acct" >
             <option value=" " > </option>
             <option value="1" >Thing</option>
             <option value="2" >Thing2</option>
         </select></td>
     <td><input name="qty" type="number" id="qty" size="2" min="1" maxlength="6" required/></td>
     <td><input name="price" type="number" id="price" min="0.00" step="0.01"  value="0.00" style="width: 150px;"required/ onchange="total()"></td>
     <td><input type="button" id="deleterowbtn" value="Delete" onclick="deleteRow(this)"/></td>
     <td><input type="button" id="addrowbtn" value="Add Item" onclick="duperow()"/></td>
</tr>
</table>
</table>
</form>

Answer 1

问题在于您绑定(bind)到 document.ready 上的 keydown 事件监听器，这意味着动态创建的输入元素没有任何内容绑定(bind)到其 keydown 事件。

你可以这样做:

$(document).ready(function () {
    $("table.beta").on("keydown", "input", function (e) {
        if ( $(e.target).parents("tr").is("tr:last")) {
            duperow();
        }
    });
});