Question

我有一个功能，当用户点击删除按钮时删除表上的行。如果只剩下两行（标题和输入行），我不希望用户能够删除它。我试过返回（假）;和exit（）;并且都不起作用。我确实得到了警报，但无论如何都会删除该行。

我在下面有以下jquery函数：

function deleteLine() {
  var $rowcount = $("#desc_table tr").length;
  if ($rowcount <= 2) {
    alert("Cannot remove all the description lines.");
    return (false);
  } else {
    $("#desc_table").on('click', '.btnDelete', function() {
      $(this).closest('tr').remove();
    });
  }
}

不确定你是否需要这个，但这里是我的html的一部分：

<tr>
  <td><input name="desc1" type="text"></td> 
  <td> <input name="desc_hr1" type="text"></td>
  <td> <input name="desc_rt1" type="text"></td>
  <td><input name="desc_amt1" type="text"></td>
  <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td>
</tr>
<tr>
  <td><input name="desc2" type="text"></td> 
  <td> <input name="desc_hr2" type="text"></td>
  <td> <input name="desc_rt2" type="text"></td>
  <td><input name="desc_amt2" type="text"></td>
  <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td>
</tr>
<tr>
  <td><input name="desc3" type="text"></td>
  <td> <input name="desc_hr3" type="text"></td>
  <td> <input name="desc_rt3" type="text"></td>
  <td><input name="desc_amt3" type="text"></td>
  <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine()"></td>
</tr>

Answer 1

此行为所有与您的支票短路的行添加事件处理程序：

$("#desc_table").on('click','.btnDelete',function() {
    $(this).closest('tr').remove();
});

有了这个，他们现在都有一个直接删除行的点击处理程序。

您可以使用以下内容添加对输入的引用：

<input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)">

然后用它来删除行：

function deleteLine(e){
    var $rowcount = $("#desc_table tr").length;
    if($rowcount <= 2){
        alert("Cannot remove all the description lines.");
        return ;
    }
    else{
       e.closest('tr').remove();
    }
 }

当然，还有其他方法 - 重要的是避免向所有行添加新的点击处理程序。

Answer 2

您不需要onclick属性。只需委托点击处理程序，然后将检查放在那里。

＆＃13;

$("#desc_table").on('click', '.btnDelete', function() {
  var $rowcount = $("#desc_table tr").length;
  if ($rowcount <= 2) {
    alert("Cannot remove all the description lines.");
    return (false);
  } else {
    $(this).closest('tr').remove();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="desc_table">
  <tr>
    <td><input name="desc1" type="text"></td>
    <td> <input name="desc_hr1" type="text"></td>
    <td> <input name="desc_rt1" type="text"></td>
    <td><input name="desc_amt1" type="text"></td>
    <td><input type="button" value="X" name="delete" class="btnDelete" ></td>
  </tr>
  <tr>
    <td><input name="desc2" type="text"></td>
    <td> <input name="desc_hr2" type="text"></td>
    <td> <input name="desc_rt2" type="text"></td>
    <td><input name="desc_amt2" type="text"></td>
    <td><input type="button" value="X" name="delete" class="btnDelete"></td>
  </tr>
  <tr>
    <td><input name="desc3" type="text"></td>
    <td> <input name="desc_hr3" type="text"></td>
    <td> <input name="desc_rt3" type="text"></td>
    <td><input name="desc_amt3" type="text"></td>
    <td><input type="button" value="X" name="delete" class="btnDelete"></td>
  </tr>
</table>

＆＃13;

在if语句中停止函数

2 个答案: