Удалить последнюю строку таблицы, если это не единственная строка с jquery

Question

Удалить последнюю строку таблицы, если это не единственная строка с jquery

0

У меня есть кнопки, которые добавляют и (предположительно) удаляют строки и элементы в таблице динамически.

Однако я не могу удалить последнюю строку в таблице, если она не является последней оставшейся строкой.

Моя цель должна быть не менее 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" было ключевым для всего.

Jasonson 13 нояб. 2013, в 04:35

Источник

Теги:

javascript

jquery

html

2 ответа

0

Ваш код изменен, чтобы заставить его работать:

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

SRay 13 нояб. 2013, в 01:28

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-11-13T00-33-00.000Z

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

Демо: скрипка

Я использовал пример, который я нашел здесь сегодня ранее, и единственный способ, которым я мог заставить строки таблицы отображаться на самом деле, был иметь этот DIV именно в этом месте. Я находился в процессе редактирования вопроса с ответом, когда вы опубликовали свой ответ. В любом случае, спасибо.