jquery - add row to table on entering a value in last table cell -

i want add new row table when enter data last table cell.

i have seen fiddle on how link. want alter additional row added onchange in last td.

so, using jquery 1.7, code is:

<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> 

i want change dynamically add row on changing / entering data last td.

something like,

<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> 

so onclick / onchange triggers jquery add new row, uniqu id per counter value.

any appreciated.

thanks always.

use on change event input work dynamically added row's input too.

try this

updated

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();  }); 

i taking change event firstname input here.. can change selector want...

note: input change event triggerd when particular input blured (when loose focus)

fiddle here updated fiddle