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

How to not allow deleting all rows in table?

本文关键字：不允许 删除      更新时间：2023-09-26

我有一个简单的表，有3列，class=" code"，"description"，"delete"列有类"delete"是一个复选框类型，和一个按钮class="savebtn"。

我需要以下内容:

当用户点击保存时:

  1. Jquery必须验证代码列是否有数据
  2. 如果delete列中的任何单元格被选中，则删除该行。
  3. 如果用户选中了delete列中的所有单元格，提示表必须至少有一行，并且不删除这些行。

这是一个演示，但它不适合我。

that what I try:

$(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");
            }
          });
      });
   });
});

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

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

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

给你一把小提琴。

编辑:这是一个新的提琴，我已经添加了一个按钮，你可以清除/填充最后一行的值，所以你可以测试。

这是您正在尝试做的更新的fiddle

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属性。

我已经做到了，每次点击一个简单的计数:

参见 

 $(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);
        }
    });
});

试试这个: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);
      });
    });
相关文章：