javascript - 添加和删​​除 TR

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>');
    }

});

直播:http://jsfiddle.net/jSMBZ/4/

如何修改此脚本，以便如果我选择 three ，我添加一个新的 <tr>到 table 上。如果我选择 one或two ，那么我需要删除这个新的 <tr> (如果存在)。

编辑:我更新了我的示例

Answer 1

如果您希望新行位于选择的正下方，或者换句话说，您希望它成为表格上的第一行，那么您可以使用 prepend 来代替。下面的一些代码...

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

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

});

为我工作http://jsfiddle.net/PRu6c/