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>

see: https://stackoverflow.com/a/50365764/7186739 – Billu May 16 '18 at 12:41 — Billu, May 16 '18 at 12:41

Dominic Barnes · Accepted Answer · 2010-01-29T18:46:13.087

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 '10 at 18:46

answered Jan 29 '10 at 09:19

Dominic Barnes

28,083
8
65
90

in my experience you cannot modify the html contents of a table. Try using document.createElement("tr"), and document.appendElement() – mrwayne Jan 29 '10 at 09:57
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. – Dominic Barnes Jan 29 '10 at 18:47
Don't forget do include "tbody" as show in the source example. – Ricardo Rivaldo May 19 '14 at 19:48

score 23 · Answer 2 · edited May 23 '17 at 12:26

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('' + value1+'') — Amit, Jan 29 '10 at 10:19

score 11 · Answer 3 · answered Feb 06 '17 at 08:41

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

score 9 · Answer 4 · edited Oct 26 '15 at 21:36

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 '15 at 21:36

David Clarke

12,888
9
86
116

answered Jun 28 '13 at 08:59

Naveen Kumar

200
2
10

score 4 · Answer 5 · answered Jan 29 '10 at 09:16

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 '10 at 09:16

rsilva4

1,915
1
23
39

ok, you are doing something else wrong, please check here (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) your own code with my solution or dominic solution you will see that works. – rsilva4 Jan 29 '10 at 10:11

score 2 · Answer 6 · edited Nov 15 '16 at 22:17

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 '16 at 22:17

Paul T. Rawkeen

3,994
3
35
51

answered Jan 29 '10 at 12:25

Punit Rathore

970
1
8
16

Billu · Answer 7 · 2020-11-04T05:31:26.627

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 04 '20 at 05:31

answered May 16 '18 at 08:22

Billu

2,733
26
47

How do you append rows to a table using jQuery?

7 Answers7

Linked