添加和刪除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();