How do I add an extra html table row upon button click using jQuery?

Question

I have the following:

<table>
  <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='' onclick='return false;'>Add Author</a>

and each time I click the link tag to 'add author', I want to create an extra table row like the following:

  <tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>

I looked at .append() and I'm not sure exactly how to use it for my situation. And I'd like to be able to add infinite amount of new table rows. How do I do this?

see stackoverflow.com/questions/171027/add-table-row-in-jquery — Rupesh Pawar
– Rupesh Pawar, Commented Nov 5, 2011 at 5:07

Kailas · Accepted Answer · 2016-06-17 08:42:00Z

14

Firstly, correct your HTML as:

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

(I have added indents only for visibility) and do not use inline JavaScript. Plus, be consistent, preferably use " (double quotes) for HTML attributes, ' (single quotes) for JavaScript strings.

Second, do something like that:

jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();

        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
            counter++;
        jQuery('table.authors-list').append(newRow);

    });
});

It will add a row to the table with each click on the link having class add-author (just to be sure no other link is influented), incrementing number at the end of the name of every inserted field's name by 1. The row will be inserted at the end of the table having class authors-list (same reason as with class for a link). See this jsfiddle as a proof.

edited Jun 17, 2016 at 8:42

Kailas

7,6183 gold badges50 silver badges65 bronze badges

answered Nov 5, 2011 at 5:38

Tadeck

138k28 gold badges155 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Simon Suh Over a year ago

I use single quotes as much as I can as it is one less keystroke in all of the code that I write, but if you would be kind enough to give me a specific reason why I should use double and single quotes as you have mentioned, I would love to change my coding preferences. I'm still new to the coding world (only been studying full time for about 8 months of php) and am happy to take in any good advice.

Tadeck Over a year ago

@Qlidnaque: Just be consistent and use different types of quotes (different for JavaScript and different for HTML/CSS, so you minimize the chance of mistakes). In case of PHP it is more important, because when you use double quotes for strings that do not contain any variables, you may accidentally find yourself in a situation where some bug appears and you are unable to find it quick. In case of JavaScript this is more about choosing coding standard. I try to follow MooTools' coding standard.

Muddasir Abbas Over a year ago

@Tadeck how can i display dynamic data in table row which is coming from php? such as i have select boxes in all tds and there data is coming from db such as country, doctor specializations in extra. Thanks in advance.

Tadeck Over a year ago

@MuddasirAbbas: That is really wide topic - and the answers depends on whether you are asking about triggering the update, requesting from server, processing on the backend, retrieving, adding to table, or making it visually distinct. This answer really handles only "adding to table" part. If you will be more specific, I will try to point you to the right resources.

Muddasir Abbas Over a year ago

@Tadeck i am trying to append same row when user click on + icon and want to hide this row on click - icon. this functionality i am trying to create but i am confused how i can show php dynamic data in jquery append or after function. Thanks

|

Shomz · Accepted Answer · 2011-11-05 05:15:02Z

3

Check it out here.

You'll probably want to increase the number in the name attributes in each iteration.

answered Nov 5, 2011 at 5:15

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Comments

Ghost-Man · Accepted Answer · 2011-11-05 05:29:05Z

0

Give an id to your table, suppose my_table and an id to the anchor a suppose my_button then try the below:

Your modified code:

<table id="my_table">
<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 id="my_button" href='#'>Add Author</a>

And add the below script after including the jquery library in your page.

$(document).ready(function()
{
  new_row="<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>";
  $("#my_button").click(function()
  {    
    $("#my_table").append(new_row);
    return false;

  }
}

answered Nov 5, 2011 at 5:29

Ghost-Man

2,1951 gold badge21 silver badges25 bronze badges

2 Comments

Tadeck Over a year ago

-1 for not using var for newly created variables. It will make them global and pollute global namespace. Second reason is being inconsistent about quotes in HTML. Third reason would be not using event.preventDefault() (which would increase code usability), but I am unable to give -3 instead of -1. Sorry.

Ghost-Man Over a year ago

Yes you are right. I just provided the minimal solution to create new rows using his html code. It will be problem to obtain values from his newly created elements, but as he mentioned he would like to create INFINITE rows, it seemed was interested in just testing. Anyway, your code is a practical solution. Thanks !

Collectives™ on Stack Overflow

How do I add an extra html table row upon button click using jQuery?

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related