当行多于一时启用删除按钮答案

【问题标题】：Enable Delete button when row is more than one当行多于一时启用删除按钮
【发布时间】：2021-01-23 14:43:04
【问题描述】：

当行多于一时启用表格第四列中的“删除”按钮，当行数为一时禁用。

$(document).ready(function() {
  var counter = 0;
  $("#addrow2").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
    newRow.append(cols);
    $("#myTable2").append(newRow);
    counter++;
  });
  $("#myTable2").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable2" class="table">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Full Address</th>
      <th>Business or Occupation</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

Enable Delete button in forth col of the table when the row is more than one and Disable when the row is one 如果你重复这 2 次，它并没有让它更清楚:)

标签： javascript html jquery css bootstrap-4

【解决方案1】：

您可以使用prop() 启用/禁用.. 也可以添加/删除类以防止单击..在删除按钮单击时您需要检查行的length .. 参见下一个代码

$(document).ready(function() {
  var counter = 0;
  $("#addrow2").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="text" class="form-control"></td>';
    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
    newRow.append(cols);
    $("#myTable2").append(newRow);
    $(".ibtnDel").prop('disabled' , false).removeClass('disabled'); // <<<<<< here
    counter++;
  });
  $("#myTable2").on("click", ".ibtnDel:not(.disabled)", function(event) { // <<<< here ..add :not(.disabled) to prevent the click for .disabled class element
  
    $(this).closest("tr").remove();
    counter -= 1;
   // >>>>>> here ..check for the row length
   if($("#myTable2 tbody tr").length === 1){
    $(".ibtnDel").prop('disabled' , true).addClass('disabled');
   }
   console.log($("#myTable2 tbody tr").length);
  });
});

.disabled{
  background : red;
  color : #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addrow2">Add Row</button>
<table id="myTable2" class="table">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Full Address</th>
      <th>Business or Occupation</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
    </tr>
  </tbody>
</table>

【讨论】：