在上一個表格單元格中輸入值時向表格添加行

Question

當我將數據輸入到最後一個表格單元格時，我想向表格添加一個新行。

我已經看到了這個fiddle如何使用鏈接。我想改變這個，以便在最後一個td中添加onChange。

因此，使用jQuery 1.7，代碼：

<table class="authors-list"> 
    <tr><td>author's first name</td><td>author's last name</td></tr> 
    <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr> 
</table> 
<a href="#" title="" class="add-author">Add Author</a> 

<script type="text/javascript"> 
var counter = 1; 
jQuery('a.add-author').click(function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
     counter + '"/></td><td><input type="text" name="last_name' + 
     counter + '"/></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
}); 
</script> 

我想改變這種動態添加上改變/輸入數據到最後TD行。

喜歡的東西，

<table class="authors-list"> 
    <tr><td>author's first name</td><td>author's last name</td></tr> 
    <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" onclick="add-author"/></td></tr> 
</table> 


<script type="text/javascript"> 
var counter = 1; 
jQuery('a.add-author').click(function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
     counter + '"/></td><td><input type="text" name="last_name' + 
     counter + '"/></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
}); 
</script> 

所以的onclick /平變化觸發jQuery來添加一個新行，用uniqu ID按計數器值。

任何幫助表示讚賞。

Answer 1

使用on的輸入，所以它的動態添加行的輸入工作了變化事件。

試試這個

更新

var counter = 1; 
jQuery("table.authors-list").on('change','input[name^="first_name"]',function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
    counter + '"/></td><td><input type="text" name="last_name' + 
    counter + '"/></td><td><a class="deleteRow"> x </a></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
}); 

jQuery("table.authors-list").on('click','.deleteRow',function(event){ 

    $(this).closest('tr').remove(); 
}); 

我正在爲firstname輸入更改事件在這裏..你可以把它改成你想要的任何選擇......

注意：僅當特定輸入模糊時才觸發輸入改變事件（當其失去焦點時）

fiddle here updated fiddle

Answer 2

類似這樣的事情可以做到，但它會出現一些其他的錯誤，你需要根據你最終試圖達到的目標來解決。

通過觸發鍵控而非更改，您可以在不添加空白行的情況下編輯內容。

http://jsfiddle.net/yUfhL/209/

var counter = 1; 
jQuery("table.authors-list").on("keyup", "input[name*='last_name']", function(event){ 
    event.preventDefault(); 
    if($(this).val().length == 1) { 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
     counter + '"/></td><td><input type="text" name="last_name' + 
     counter + '"/></td></tr>'); 

     jQuery('table.authors-list').append(newRow); 
    } 
});