jQuery单击事件添加或删除表行答案

【问题标题】：JQuery click event to add or remove table rowsjQuery单击事件添加或删除表行
【发布时间】：2018-08-18 21:31:48
【问题描述】：

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

我尝试的是在我添加的行中添加一个唯一的 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();
    } )
  });

【问题讨论】：

使用类而不是 ID，ID 应该是唯一的
你是对的，但无论我使用哪个，都会发生相同的结果。
我无法重现您的错误...请用有问题的代码更新小提琴jsfiddle.net/GRUFA
This 可能会有所帮助。

标签： javascript jquery html-table

【解决方案1】：

不确定您是否希望 100% 更改您的代码，但这里有一个添加或删除的小提琴 - 但不会删除第一行（不会吃掉整个桌子）。

http://jsfiddle.net/HR5se/

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

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

注意：我将您的字形转换为“+”和“-”文本，以便我可以在这里看到它们。

【讨论】：

这是朝着正确方向迈出的一步。在我的代码中有更多的列。我为这个问题简化了它。我宁愿不根据 .form-control 进行选择。
@SteveW。你能适应你的真实代码吗？这个想法是用一个类唯一地标识您的输入行，然后 .count() 该类以确保删除仅在至少有 2 个时才有效。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

这似乎解决了问题。

完整代码：

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

【讨论】：