0
<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?

4 Answers 4

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/

1

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.

1

Use

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

Rather than append, use after (docs):

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

http://jsfiddle.net/9vKH4/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.