javascript - 删除表的最后一行，除非它是唯一带有 jquery 的行

Question

我有按钮可以动态添加和（据说）删除表中的行和元素。

但是，我无法删除表中的最后一行，除非它是最后一行。

我的目标是必须至少有 1 个（输入的第一行）不能被删除。

我的 HTML：

<TABLE id="tblTradesman">
<TR>
    <TH>Name:</TH>
    <TH>Arrive: (hh:mm)</TH>
    <TH>Leave: (hh:mm)</TH>
</TR>
<TR>
    <div id="rows">
        <TD><input type="text" id="txtTradesman<? $i ?>"></TD>
        <TD><input type="text" id="txtTimeArrive<? $i ?>"></TD>
        <TD><input type="text" id="txtTimeLeave<? $i ?>"></TD>
    </div>
</TR>
</TABLE>
<input id="btnAddTradesperson" type="button" value="Add" /><input id="btnDelTradesperson" type="button" value="Del" />  

我的脚本：

$("#btnAddTradesperson").click(function () { 

        $("#tblTradesman").each(function () {

            var tds = '<tr>';
            jQuery.each($('tr:last td', this), function () {
                 tds += '<td>' + $(this).html() + '</td>';
            });

            tds += '</tr>';

            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
});

$("#btnDelTradesperson").click(function (){
    $("#tblTradesman").each(function(){
        if($('tbody', this).length > 1){
            $('tbody tr:last', this).remove();
        }else {
            alert("Must be at least 1 Trades person assigned to this job.")
        }
    });
}); 

链接到 FIDDLE 演示

我想通了：

if($('tbody tr', this).length > 1)

添加“tr”是这一切的关键。

Answer 1

您的 html 无效（div不能是 的子级tr），需要使用thead和tbody分隔表头和正文

<TABLE id="tblTradesman">
    <thead>
        <TR>
            <TH>Name:</TH>
            <TH>Arrive: (hh:mm)</TH>
            <TH>Leave: (hh:mm)</TH>
        </TR>
    </thead>
    <tbody>
        <TR>
            <TD><input type="text" id="txtTradesman<? $i ?>"/></TD>
            <TD><input type="text" id="txtTimeArrive<? $i ?>"/></TD>
            <TD><input type="text" id="txtTimeLeave<? $i ?>"/></TD>
        </TR>
    </tbody>
</TABLE>
<input id="btnAddTradesperson" type="button" value="Add" /><input id="btnDelTradesperson" type="button" value="Del" />  

然后

var $tbody = $("#tblTradesman tbody")
$("#btnDelTradesperson").click(function (){
    var $last = $tbody.find('tr:last');
    if($last.is(':first-child')){
        alert('last is the only one')
    }else {
        $last.remove()
    }
}); 

演示：小提琴

Answer 2

您的代码已修改以使其工作：

$("#btnAddTradesperson").click(function () { 

            $("#tblTradesman").each(function () {

                var tds = '<tr>';
                jQuery.each($('tr:last td', this), function () {
                     tds += '<td>' + $(this).html() + '</td>';
                });

                tds += '</tr>';

                if ($('tbody', this).length > 0) {
                    $('tbody', this).append(tds);
                } else {
                    $(this).append(tds);
                }
            });
    });

    $("#btnDelTradesperson").click(function (){
        $("#tblTradesman").each(function(){

            if($('tbody', this).length > 0 && $('tbody tr').length > 2){

                $('tbody tr:last', this).remove();
            }else {
                alert("Must be at least 1 Trades person assigned to this job.")
            }
        });
    });