如何不允許刪除表中的所有行？

Question

我有3列與類的簡單表=「代碼」，「說明」，「刪除」列具有類「刪除」是一個複選框類型，以及與類=「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"); 
    } 
    } 
}); 
}); 
}); 
}); 

有與你當前的代碼選擇，我有corrected.For例如幾個問題「TBODY」元素是任何地方，在TD應該不會有型屬性。

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