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>。如果我选择one或two，则需要删除此新<tr>（如果存在）。

编辑：我更新了我的例子

Answer 1

我不确定这是否适合您的需求：

我在新创建的行中添加了一个类，名为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 2

如果您希望选择下方的新行，或者换句话说，您希望它是表格的第一行，那么您将使用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 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();

添加和删除TR

5 个答案:

添加和删​​除TR

5 个答案:

添加和删除TR