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元素单击，在您的代码中，您将多个单击处理程序应用于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");
     }
});

不要删除最后一行jQuery

2 个答案: