不要刪除最後一行jQuery

Question

我有這種形式使用jQuery填充表，代碼工作正常的問題是，我不知道如何禁用刪除按鈕，當我只有一行。我的意思是我不想刪除該行，如果是剩下的最後一個。

形式

<form name="prescor" id="prescor" method="post" action="#"> 
<table class="formulario"> 
    <tr> 
    <td>Cantidad</td> 
    <td><input name="cant" type="text" id="cant" autocomplete="off" onKeyUp="subtotal()" pattern="[0-9]*." step="any"></td> 
    <td>Artículo</td> 
    <td><input name="idarti" type="text" id="idarti" autocomplete="off" ></td> 
</tr> 
<tr> 
    <td>Precio</td> 
    <td><input name="prec" id="prec" autocomplete="off" onKeyUp="subtotal()"></td> 
    <td>Total</td> 
    <td><input name="tota" type="text" id="tota" readonly></td> 
    <td><input name="agregar" type="button" value="Agregar" onclick="fn_agregar()" /></td> 
</tr> 
</table> 
<table id="grilla" class="lista"> 
<thead> 
<tr> 
    <th>Cant.</th> 
    <th>Artículo</th> 
    <th>Precio</th> 
    <th>Subtotal</th> 
    <th></th> 
</tr> 
</thead> 
<tbody> 
</tr> 
</tbody> 
<tfoot> 
    <tr> 
    <td colspan="2"><strong>No. Lineas:</strong> <span id="span_cantidad"></span></td> 
</tr> 
</tfoot> 
</table> 

腳本

$(document).ready(function(){ 
fn_eliminar(); 
fn_cantidad(); 
}); 

function fn_cantidad(){ 
var n = $("#grilla tbody").find("tr").length; 
$("#span_cantidad").text(n); 
}; 

function fn_agregar() { 
cadena = "<tr>"; 
cadena = cadena + "<td><input type='text' name='cantidad[]' value='" + $("#cant").val() + "' readonly size='1' required></td>"; 
cadena = cadena + "<td><input type='text' name='idarticulo[]' value='" + $("#idarti").val() + "' readonly size='2' required></td>"; 
cadena = cadena + "<td><input type='text' name='precio[]' value='" + $("#prec").val() + "' readonly size='4' required></td>";            
cadena = cadena + "<td><input type='text' name='subtotal[]' value='" + $("#tota").val() + "' readonly size='7' required></td>";    
cadena = cadena + "<td><a class='elimina'><img src='cancelar.png' width='16' height='16' title='Eliminar Fila'/></a></td>"; 
$("#grilla tbody").append(cadena); 
document.getElementById("idarti").value=""; 
document.getElementById("cant").value=""; 
document.getElementById("prec").value=""; 
document.getElementById("tota").value=""; 
fn_eliminar(); 
fn_cantidad(); 
}; 

function fn_eliminar() 
{ 
    $("a.elimina").click(function() 
    { 
     id = $(this).parents("tr").find("td").eq(0).html(); 
     $(this).parents("tr").fadeOut("normal", function() 
     { 
      $(this).remove(); 
      fn_cantidad(); 
     }) 
    }); 
} 

Answer 1

在刪除處理程序檢查是否只有一個項目，如果這樣什麼也不做就走了。

還可以使用事件委託來處理remove元素點擊，在你的代碼中應用多個點擊處理程序來刪除元素，因爲每次調用fn_eliminar時間將新的點擊處理程序添加到所有先前存在刪除元素

$(document).ready(function() { 
    fn_eliminar(); 
    fn_cantidad(); 
}); 

function fn_cantidad() { 
    var n = $("#grilla tbody").find("tr").length; 
    $("#span_cantidad").text(n); 
}; 

function fn_agregar() { 
    cadena = "<tr>"; 
    cadena = cadena + "<td><input type='text' name='cantidad[]' value='" + $("#cant").val() + "' readonly size='1' required></td>"; 
    cadena = cadena + "<td><input type='text' name='idarticulo[]' value='" + $("#idarti").val() + "' readonly size='2' required></td>"; 
    cadena = cadena + "<td><input type='text' name='precio[]' value='" + $("#prec").val() + "' readonly size='4' required></td>"; 
    cadena = cadena + "<td><input type='text' name='subtotal[]' value='" + $("#tota").val() + "' readonly size='7' required></td>"; 
    cadena = cadena + "<td><a class='elimina'><img src='cancelar.png' width='16' height='16' title='Eliminar Fila'/></a></td>"; 
    $("#grilla tbody").append(cadena); 
    document.getElementById("idarti").value = ""; 
    document.getElementById("cant").value = ""; 
    document.getElementById("prec").value = ""; 
    document.getElementById("tota").value = ""; 
    fn_cantidad(); 
}; 

function fn_eliminar() { 
    $("#grilla tbody").on('click', 'a.elimina', function() { 
     if ($('#grilla tbody tr').length == 1) { 
      return; 
     } 
     var id = $(this).closest("tr").find("td").eq(0).html(); 
     $(this).closest("tr").fadeOut("normal", function() { 
      $(this).remove(); 
      fn_cantidad(); 
     }) 
    }); 
} 

Answer 2

您還可以計算表中的行數..

例如，

HTML

<table class="invoice-table"> 
     <thead> 
      <tr> 
       <th>col 1</th> 
       <th>col 2</th> 
       <th>col 3</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>col 1</td> 
       <td>col 2</td> 
       <td>col 3</td> 
       <td> 
       <button type="button" class="remove-row"> DELETE </button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

JQUERY

$(document).on('click', '.remove-row', function(){ 
    var rows = $('.invoice-table').find('tbody').children('tr').length; 
    if(rows > 1) 
    { 
     $(this).closest("tr").remove(); 
    } 
    else 
    { 
     alert("There must be at least one row in the table"); 
    } 
});