javascript - jQuery单击事件添加或删除表行

Question

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

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

字形：

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

Answer 1

不确定 100% 你想用你的代码改变，但这是一个添加或删除的小提琴 - 但不会删除第一行（不会吃掉整个桌子）。

http://jsfiddle.net/HR5se/

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

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

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

Answer 2

我添加了一个 if 语句，仅当表有 3 行或更多行时才允许取出一行。这保留了我一直希望在页面上显示的最后两行。

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

这似乎解决了问题。

完整代码：

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

Answer 3

看看将onclick事件更改为mouseup是否有任何效果。不久前我遇到了类似的问题。