Question

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

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

Answer 1

不确定100％你想要用你的代码改变，但这里是一个添加或删除的小提琴 - 但不会删除第一行（不会占用整个表）。

http://jsfiddle.net/HR5se/

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

将为您提供有多少数据（输入）行。在这个小提琴中，我检查是否有多个数据行，如果没有，则不会发生删除。

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

Answer 2

查看将onclick事件更改为mouseup是否有效。我不久前有类似的问题。

Answer 3

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

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

这似乎解决了这个问题。

完整代码：

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

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

3 个答案: