How do you append rows to a table using jQuery?

Question

Hi I was trying to add a row to a table using jQuery, but it is not working.
What might be the reason?

And, can I put in some value to the newly added row..?

Here is the code:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $('a').click(function() {
            $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>');
        });
    </script>
    <title></title>
</head>
<body>
    <a href="">Link</a>
    <table id="myTable">
        <tbody>
            <tr>
                <td>
                    test
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Dominic Barnes · Accepted Answer · 2010-01-29 18:46:13Z

56

I'm assuming you want to add this row to the <tbody> element, and simply using append() on the <table> will insert the <tr> outside the <tbody>, with perhaps undesirable results.

$('a').click(function() {
   $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});

EDIT: Here is the complete source code, and it does indeed work: (Note the $(document).ready(function(){});, which was not present before.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a').click(function() {
       $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
    });
});
</script>
<title></title>
</head>
<body>
<a href="javascript:void(0);">Link</a>
<table id="myTable">
  <tbody>
    <tr>
      <td>test</td>
    </tr>
  </tbody>
</table>
</body>
</html>

edited Jan 29, 2010 at 18:46

answered Jan 29, 2010 at 9:19

Dominic Barnes

28.5k8 gold badges69 silver badges91 bronze badges

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

3 Comments

mrwayne Over a year ago

in my experience you cannot modify the html contents of a table. Try using document.createElement("tr"), and document.appendElement()

Dominic Barnes Over a year ago

I modified your source so that it should work correctly. (Note the edit above) I didn't notice this before, but you didn't have the $(document).ready() included, which basically breaks everything. Unless you wait for the ready() event to fire, the DOM isn't loaded and your jQuery selector probably won't find what it is looking for.

Ricardo Rivaldo Over a year ago

Don't forget do include "tbody" as show in the source example.

Community · Accepted Answer · 2017-05-23 12:26:04Z

The following code works

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function AddRow()
{
    $('#myTable').append('<tr><td>test 2</td></tr>')
}
</script>
<title></title>
</head>
<body>
<input type="button" id="btnAdd" onclick="AddRow()"/>
<a href="">test</a>
<table id="myTable">
  <tbody >
    <tr>
      <td>
        test
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Note this will work as of jQuery 1.4 even if the table includes a <tbody> element:

jQuery since version 1.4(?) automatically detects if the element you are trying to insert (using any of the append(), prepend(), before(), or after() methods) is a <tr> and inserts it into the first <tbody> in your table or wraps it into a new <tbody> if one doesn't exist.

and following can be used too var value1 = 1; $('#myTable').append('<tr><td>' + value1+'</td></tr>')

Yusril Herlian Syah · Accepted Answer · 2017-02-06 08:41:43Z

11

I always use this code below for more readable

$('table').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

or if it have tbody

$('table').find('tbody').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

answered Feb 6, 2017 at 8:41

Yusril Herlian Syah

4971 gold badge6 silver badges12 bronze badges

Comments

David Clarke · Accepted Answer · 2015-10-26 21:36:17Z

9

Maybe this is the answer you are looking for. It finds the last instance of <tr /> and appends the new row after it:

<script type="text/javascript">
    $('a').click(function() {
        $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
    });
</script>

edited Oct 26, 2015 at 21:36

David Clarke

13.4k9 gold badges92 silver badges121 bronze badges

answered Jun 28, 2013 at 8:59

Naveen Kumar

2002 silver badges10 bronze badges

Comments

rsilva4 · Accepted Answer · 2010-01-29 09:16:54Z

4

You should append to the table and not the rows.

<script type="text/javascript">
$('a').click(function() {
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>

answered Jan 29, 2010 at 9:16

rsilva4

1,9551 gold badge24 silver badges40 bronze badges

1 Comment

rsilva4 Over a year ago

ok, you are doing something else wrong, please check here (secretgeek.net/rtjqe/realtimejqueryeditor.htm) your own code with my solution or dominic solution you will see that works.

Paul T. Rawkeen · Accepted Answer · 2016-11-15 22:17:45Z

2

Try:

$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");

And in the partial, you should have:

<td>row1</td>
<td>row2</td>

edited Nov 15, 2016 at 22:17

Paul T. Rawkeen

4,1133 gold badges38 silver badges53 bronze badges

answered Jan 29, 2010 at 12:25

Punit Rathore

9701 gold badge8 silver badges16 bronze badges

Comments

Muhammad Bilal · Accepted Answer · 2020-11-04 05:31:26Z

2

Add as first row or last row in a table

To add as first row in table

$(".table tbody").append("<tr><td>New row</td></tr>");

To add as last row in table

$(".table tbody").prepend("<tr><td>New row</td></tr>");

edited Nov 4, 2020 at 5:31

answered May 16, 2018 at 8:22

Muhammad Bilal

3,08629 silver badges55 bronze badges

Collectives™ on Stack Overflow

How do you append rows to a table using jQuery?

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Linked

Related