appendTo - next to instead of below

<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>开发者_JAVA百科;
        <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?

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/

I think rather than using appendTo you will want to use insertAfter. That way it should be inserted after the tag is closed instead of being appended to it before it's closed.

Use

$('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');

Rather than append, use after (docs):

$('#www').after('<tr class="new"><td>new</td><td>new</td></tr>');

http://jsfiddle.net/9vKH4/