adding rows dynamically to an html table with no rows

Question

i am using this to add a row dynamically to a table

   $('#myTable tr:last').after('<tr><td>1</td><td>a</td></tr>');

but it doesn't seem to work if the table has no records:

<table id="myTable" class="altTable">
    <thead>
        <tr>
            <th>
                Col1
            </th>
            <th>
                Col2
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

what would be the right selector here to add a row that would work if there are 0 or > 0 rows existing ?

Answer 1

if( !$('#myTable tbody').length )
{
  $('#myTable').append( $('<tbody>') );
}

$('#myTable tbody').append( '<tr><td>1</td><td>a</td></tr>' );

Answer 2

Try this...

$("<tr><td>1</td><td>a</td></tr>").appendTo("#myTable tbody");

That should add a row to the end of the table body tag regardless of if there are rows there already or not.

If the tbody tag won't be present w/o any rows already there then you would do this...

if ($("#myTable tbody").length > 0){
  $("<tr><td>1</td><td>a</td></tr>").appendTo("#myTable tbody");
}
else{
  $("<tbody><tr><td>1</td><td>a</td></tr></tbody>").appendTo("#myTable");
}