Question

<table id="tab" border="2">
    <tbody>
        <tr> <td>aaa</td><td>aaa</td></tr>
        <tr> <td>bbb</td><td>bbb</td></tr>
        <tr> <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'){

       $('#tab').append('<tr><td>new</td><td>new</td></tr>');
    }

});

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

How can I modify this script so that if I select three, I add a new <tr> to the table. If I select either one or two, then I need to remove this new <tr> (if it exists).

edit: i updated my example

Answer 1

If you want the new row right below the select, or in other words, you want it to be the first row on the table then you would use prepend instead. Some code below…

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

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

});

Works for me http://jsfiddle.net/PRu6c/