Amit Amit - 20 days ago 5
HTML Question

How do you append rows to a table using jQuery?

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>

Answer

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.

Comments