JQuery单击事件来添加或删除表格行

我有一个表格的顶部有加号或减号字形图标，允许用户添加或减去行。我的代码有效，但如果用户多次点击减号按钮，它会吃掉整个表格。JQuery单击事件来添加或删除表格行

我试过的是给我添加的行添加一个唯一的ID标签，并且只删除带有ID的TR，但是如果添加了2行并且减号被按下，那么两行都将被立即删除，我只想一次删除一行。注意：下面的代码并不反映这种尝试。

Glyphicons：

<div class="well" style="margin-bottom:0px;" id="addrow"> 
    <span class="glyphicon glyphicon-plus" id="add"></span> 
    &nbsp;&nbsp;&nbsp;&nbsp; 
    <span class="glyphicon glyphicon-minus" id="minus"></span>

表：

<table class="table table-bordered table-striped" style="margin-bottom:0px;" id="myTable"> 
    <tr> 
     <td>Customer Master #</td> 
    </tr> 
    <tr> 
     <td><input type="text" class="form-control" ></td> 
    </tr> 
    </table>

JS：

$(document).ready(function(){ 
    $("#addrow").on("click", "span#add", function(){ 
     var tablerow = '<tr><td><input type="text" class="form-control" ></td></tr>' 
     $("#myTable tr:last").after(tablerow); 
    }) 
    $("#addrow").on("click", "span#minus", function(){ 
     $('#myTable tr:last').remove(); 
    }) 
    });

来源

2013-08-16 Steve W.

使用类，与其标识，标识应该是唯一 – DarkAjax

你是正确的，但不管我用同样的结果会发生。 –

我没有能够重现你的错误......请更新有问题的代码小提琴http://jsfiddle.net/GRUFA/ – Fabi

我添加了一个if语句，只允许一行被取出，如果该表有3行或更多行。这保留了我始终想要在页面上的最后两行。

if ($('#myTable tr').length > 2)

这似乎解决了这个问题。

全码：

$("#addrow").on("click", "span#minus", function(){ 
     if ($('#myTable tr').length > 2) { 
     $('#myTable tr:last').remove(); 
    }; 
    })

来源

2013-08-19 13:59:46

还不确定是否与您的代码改变，但在这里100％是增加了一个小提琴或删除 - 但不会删除第一行（不会吃掉整个表格）。

http://jsfiddle.net/HR5se/

$('#myTable tr .form-control').size()

会给你多少数据（输入）行也有。在这个小提琴中，我检查是否有多于一个的数据行，如果不是，删除不会发生。

注意：我把你的字形变成了“+”和“ - ”文字，所以我可以在这里看到它们。

来源

2013-08-16 17:36:13 Tor

这是朝正确方向迈出的一步。在我的代码中有更多的列。我简化了它的问题。我宁愿不根据.form-control做出我的选择。 –

@SteveW。你能够适应你的真实代码吗？这个想法是用一个类来唯一标识你的输入行，然后使用.count（）这个类来确保删除仅在至少有2个这样的情况下才起作用。 – Tor

看看如果更改onclick事件为mouseup有任何影响。我曾经有过类似的问题。

来源

2013-08-17 01:19:11 Andy

JQuery单击事件来添加或删除表格行

回答

相关问题