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.")
        }
    });
});

Link to FIDDLE demo

我想出来了：

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()
    }
});

演示：Fiddle

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.")
            }
        });
    });

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

2 个答案: