JQuery 删除行最多允许totalrows-1

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 of 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");