ansaurus

Question

How do you append rows to a table using jQuery?

Answer 1

A:

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

try this

antpaw 2010-01-29 09:14:12

This will add that cell to ALL `TR`'s. Not a good idea.

MDCore 2010-01-29 09:21:15

Answer 2

A:

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>

rsilva 2010-01-29 09:16:54

I tried the above, but did not work.. :(

Amit 2010-01-29 09:34:06

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.

rsilva 2010-01-29 10:11:59

Answer 3

+2 A:

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"&gt;&lt;/script&gt;
<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>

Dominic Barnes 2010-01-29 09:19:06

Did not work.. :(

Amit 2010-01-29 09:39:02

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

mrwayne 2010-01-29 09:57:02

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 2010-01-29 18:47:45

Answer 4

A:

Here is the code that 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>

Amit 2010-01-29 10:17:14

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

Amit 2010-01-29 10:19:09

Answer 5

A:

try

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

And in the partial, you should hhave

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

punit 2010-01-29 12:25:13

ansaurus

tags:

views:

answers:

How do you append rows to a table using jQuery?

related questions