Question

我在jQuery中有一个带有添加和删除功能的动态表：

我正在使用以下内容删除行：

$("#DEL").click(function(){
    $("table tr input:checked").parents('tr').remove();
});

小提琴：FIDDLE

如何避免同时删除所有列。我的意思是如果用户检查了所有行并单击删除，它应该显示一条警告消息。 应允许最多删除totalrows-1

Answer 1

您可以使用jquery的size()函数来计算带有检查输入的行数，并与总行数进行比较。

$("#DEL").click(function(){
    var checked = $("table tr input:checked").size();
    var total = $("table tr").size();
    if (checked < total) {
        $("table tr input:checked").parents('tr').remove();
    } else {
        alert("You cannot delete all rows!");
    }
});

请参阅更新的小提琴here。

Answer 2

尝试添加.length元素的tr

  $("#DEL").click(function () {
    console.log($("table tr input:checked").length)
    if ($("table tr").length === 1 
       || $("table input:checked").length === $("table tr").length) {
        alert("cannot delete last tr")
    } else {
        $("table tr input:checked").parents('tr').remove();
    }
  });

jsfiddle http://jsfiddle.net/qN2Z8/72/

Answer 3

这将完全按照您想要的方式工作，只要不检查所有行，它将删除每个选中的行，如果全部选中，则第一行将保持未删除JSFiddle

$("#ADD").click(function(){
    $("table").append($("tr:last").clone(true));
    $("tr:last input").val("");
});

$("#DEL").click(function(){
    var totalRows = $("table tr").length;
    var totalRowsChecked = $("table tr input:checked").length;
    if(totalRows == totalRowsChecked){
        $("table tr:not(:first) input:checked").parents('tr').remove();
    }else{
        $("table tr input:checked").parents('tr').remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<BUTTON ID="ADD">ADD</button>
<BUTTON ID="DEL">DELETE</button>
<TABLE>
    <TR>
        <TD>
            <INPUT TYPE='CHECKBOX' />
        </TD>
        <TD>
            <INPUT TYPE='TEXT' CLASS='MYTEXT'/>
        </TD>
        <TD>SOMETHING</TD>
    </TR>
</TABLE>

<强>更新如果检查了所有行，则显示警报：

$("table tr:not(:first) input:checked").parents('tr').remove();

应改为：

alert("Sorry, cannot delete all rows");

JQuery删除行允许最多totalrows-1

3 个答案: