CODEWITHSUNDEEP
jquerydynamichtml-tableappendrow
Smudger
Smudger

Reputation: 10809

Add row to table on entering a value in last table cell

I want to add a new row to my table when I enter data into the last table cell.

I have seen this fiddle on how to do so with a link. I want to alter this so that the additional row is added with onChange in the last td.

So, using jquery 1.7, the 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 to change this to dynamically add the row on changing / entering data into the 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 the onclick / onchange triggers the jQuery to add a new row, with a uniqu id as per the counter value.

Any help is appreciated.

Upvotes: 0

Views: 1567

Answers (2)

bipen
bipen

Reputation: 36541

use on change event for the input so that it work for 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 am taking the change event for firstname input here.. you can change it to any selector you want...

NOTE: for input change event is triggerd only when that particular input is blured (when it loose its focus)

fiddle here updated fiddle

Upvotes: 2

Tom
Tom

Reputation: 12998

Something like this will do it, although it would present a few other bugs that you will need to iron out depending on what you're ultimately trying to achieve.

By triggering on keyup rather than change you can edit the content without adding a further blank row.

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

Upvotes: 1

Related Questions