Question

<table id="tab" border="2">
    <tbody>
        <tr> <td>aaa</td><td>aaa</td></tr>
        <tr> <td>bbb</td><td>bbb</td></tr>
        <tr id="www"> <td><select id="sel">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select> </td><td>ccc</td></tr>
        <tr> <td>xxx</td><td>xxx</td></tr>
        <tr> <td>yyy</td><td>yyy</td></tr>
        <tr> <td>zzz</td><td>zzzz</td></tr>
    </tbody>
</table>

$("#sel").change(function(){

    if( $(this).val() === 'three' )
        $('<tr class="new"><td>new</td><td>new</td></tr>').appendTo('#www');
    else
        $('#tab tr.new').remove();    

});

LIVE: http://jsfiddle.net/jSMBZ/7/

why this add new column next to #www instead of below? how can i fix it?

Answer 1

The two rows are being appended inside the #www td instead of after it. To add it after, you need to use the .after(content) jQuery Function like so:

$("#sel").change(function(){ 

if( $(this).val() === 'three' )
    $('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');
else 
    $('#tab tr.new').remove();    

});

Here is the jsFiddle Link with the updated example which works as you have described: http://jsfiddle.net/jSMBZ/12/