添加和删除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>'); 
    } 

}); 

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

我怎么能修改此脚本，这样如果我选择three，我添加了一个新的<tr>表。如果我选择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/

Answer 2

我不知道这是否会为你的工作需要：

我添加了一个类到新创建的行，叫new这样：

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

只要选择比three做其他，它只是删除该行：

$(".new").remove(); 

全码：

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

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

Working Demo

Answer 3

只需指定新行一些标记。在这里，我使用的ID：http://jsfiddle.net/jSMBZ/2/

只是删除标记tr如果更改为其他值则three

$("#sel").change(function(){ 
    if($(this).val() == 'three'){ 
     $('#tab').append('<tr id="added"><td>new</td><td>new</td></tr>'); 
    } else { 
     $('#tab tr#added').remove(); 
    }  
}); 

Answer 4

您可以设置class在<tr>您添加属性。

我不知道你有多聪明，但我已经updated your example here。

Answer 5

您可以使用jQuery的remove()

$('#tab tbody tr').last().remove();