Bryan Gabriel Macuer Bryan Gabriel Macuer - 2 months ago 9
HTML Question

jquery append to table id not to table inside

Im trying to add a table row to a table with a certain ID, but when appending, it also appends to tables inside my table which have different ID. I´ve searched for an answer, but no luck. I dont know what im doing wrong here is a jfiddle.

http://jsfiddle.net/n7cyE/1445/

//table

<table id="tbl_1">
<thead>
<td>column 1</td>
<td>column 2</td>
</thead>
<tbody>
<td>
<table id="tbl_2">
<thead>
<td>inside column 1</td>
<td>inside column 2</td>
</thead>
<tbody>
</tbody>
</table>
</td>
<td></td>
</tbody>
</table>


//jquery

var recent = "<tr><td>added column 1</td><td>added column 2</td></tr>";
$("#tbl_1 tbody").append(recent);

Answer

Use #tbl_1 > tbody selector instead of #tbl_1 tbody like following.

$("#tbl_1 > tbody").append(recent);

#tbl_1 tbody selects all tbody inside #tbl_1 where #tbl_1 > tbody selects only the child tbody of #tbl_1.

Comments