如何不允许删除表中的所有行？

Question

我有一个简单的表，其中包含 3 列，其中 classes = "code","description","delete" 该列的 class "delete" 是一个复选框类型，一个按钮为 class="savebtn"。

我需要以下内容：

当用户点击保存时：

1. Jquery 必须验证它有数据的代码列。
2. 如果选中删除列中的任何单元格，则删除该行。
3. 如果用户检查了删除列警告消息中的所有单元格，表格必须至少有一行，并且不要删除这些行。

这是Demo，但它不适用于我。

我尝试过的：

$(document).ready(function (){ 
$(".savebtn").bind("click", function(e){
    $('.savebtn').attr('disabled',true);
    $('.table tbody tr').each(function () {
       $(this).find('.code input').each(function () {
           if ($(this).closest("tr").find(".delete input").is(":checked")  && $('.cf-table-block tbody tr').length >=1){
               $('.delete input :checkbox:checked').closest('tr').remove();
               $('.savebtn').removeAttr('disabled');
           }else if($(this).closest("tr").find(".delete input").is(":checked")  && $('.cf-table-block tbody tr').length <2){
               e.preventDefault();
           }else if($('.delete input').prop('checked')==false && ( $(this).val().length>0)){
               $('.savebtn').removeAttr('disabled');
           }else if ($('.delete input').prop('checked')==false && ( $(this).val().length==0)){
               $(this).attr("placeholder", "Please fill this field");
            }
          });
      });
   });
});

Answer 1

首先，您应该考虑将表头包装在<thead> 中，将正文包装在<tbody> 中。这将允许您确定有多少行与我们的需求相关。

最好创建一个检查删除的行数组，然后可以将其与原始行数进行比较（通过length）。

这是一个示例 - 我已经删除了很多逻辑，因为使用数组来存储检查的行将有助于消除对许多这些条件的需求。

Here's a fiddle.

编辑：Here's a new fiddle，我在其中添加了一个按钮，供您清除/填充最后一行的值，以便您进行测试。

Answer 2

这是您正在尝试做的更新的小提琴。

https://jsfiddle.net/ko55Lbt3/6/

$(document).ready(function (){ 
$(".savebtn").bind("click", function(e){
$('.savebtn').attr('disabled',true);

 if($(".table tr [type='checkbox']:checked").length >= $('.table   tr').length -1)
 {
 alert("all rows can not be deleted");
 return false;
}

$('.table tr').each(function () {




 $(this).find('.code input').each(function () {



if ($(this).closest("tr").find(".delete input").is(":checked")){
if($(this).val().length > 0)
{
  $(this).closest("tr").remove();
  $('.savebtn').removeAttr('disabled');
}
else 
{
      $(this).attr("placeholder", "Please fill this field");
    }
    }
 });
 });
 });
 });

我已更正您当前代码中的选择器存在一些问题。例如“tbody”元素不存在，td 不应该有 type 属性。

Answer 3

我对每次点击进行了简单的计数：

见Fiddle

 $(document).ready(function (){ 

    // on click "Save"
    $(".savebtn").bind("click", function(e){
        $('.savebtn').attr('disabled',true);

        // Delete rows
        $("input:checkbox").each(function () {
            if($(this).prop("checked")){
                $(this).closest("tr").remove();
            }
        });
    });

    // on click a checkbox
    $("input:checkbox").on("click", function(){

        checkboxCount=0;
        $("input:checkbox").each(function(){
            checkboxCount++;
        });

        $("input:checkbox").each(function(){
            if($(this).prop("checked")){
                checkboxCount--;
            }
        });

        // this is just to see the value in jsFiddle
        $("#console").html(checkboxCount);

        // If there is no checkbox unchecked, disables the Save button and alert.
        if(checkboxCount<1){
            alert("Table must have at least one row!");
            $('.savebtn').attr('disabled',true);
        }else{
            $('.savebtn').attr('disabled',false);
        }
    });
});

Answer 4

试试这个： https://jsfiddle.net/ersamrow/f7ce7dpj/

HTML：

<table class="table" style="width:100%" border="1">
  <thead>
    <tr>
      <th class="code">Code</th>
      <th class="description">Description</th>
      <th class="delete">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="code" type="text">1</td>
      <td type="text">aa</td>
      <td class="delete">
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td class="code" type="text">2</td>
      <td type="text">bb</td>
      <td class="delete">
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td class="code" type="text">3</td>
      <td type="text">cc</td>
      <td class="delete">
        <input type="checkbox">
      </td>
    </tr>
  </tbody>
</table>
<br>
<input class="savebtn" style="width: 65px; font-size: 16px;" type="button" value="Save">

脚本：

  $(document).ready(function() {
      // on click "Save"
      $(".savebtn").bind("click", function(e) {
        $('.savebtn').attr('disabled', true);
        var table_rows = $('table tbody').find('tr').length;
        var checked = $('input:checkbox:checked').length;
        if (checked < table_rows) {
          // Delete rows
          $("input:checkbox").each(function() {
            if ($(this).prop("checked")) {
              $(this).closest("tr").remove();
            }
          });
        } else {
          alert("Table must have at least one row!");
        }
        $('.savebtn').attr('disabled', false);
      });
    });