테이블의 마지막 행 자동 중복

Question

사용자가 마지막 행의 입력을 입력 할 때 HTML 표의 마지막 행을 복제하려고합니다.

내 코드는 처음 실행될 때만 작동합니다.

아마도 위의 표가 간섭하고있을 가능성이 있습니까?

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

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

으로하지만, 이것은 단지 어떤 입력을 할 수있는 새로운 행을 발생합니다 또한 대체했다. 변수 "t"가 꺼져있을 수 있습니다. 나는 테이블의 크기를 줄이고 자릿수를 눈에 띄었다.

---

자바 스크립트 & 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

문제는 동적 입력 요소를 생성한다는 것을 의미 document.ready의를 keyDown 이벤트 리스너에 결합하고 있다는 것입니다 자신의 keydown 이벤트에 묶여있는 것이 없습니다.

대신이 작업을 수행 할 수 있습니다 :

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