Question

想象一下，我在表中有3行，每行有3个输入字段。当我在最后一个输入字段中键入内容时，它应该在最后一行之后添加新行，当我点击退格并且最新行中的所有字段都为空时，新添加的行应该被删除

我不知道如果新行已经附加到表中，如何防止另外添加。这就是我到目前为止所做的。

$(document).ready(function(){
    $("input[name=class_name\\[\\]]:last-child").keyup(function addNewRow(e){
        var parent = $(this).closest('tr');
        var tr = parent.clone();
        if(e.keyCode != 8){
            $("#classes tr:last-child").remove();
        }else{
            $("#classes").append(tr);
        }
    });
});

Answer 1

通过再次选择最后一个元素进行检查，并将其与this进行比较？如果它不相同，那么已经添加了一行

Answer 2

你的意思是这样的：

    <table id="classes">
        <tr>
            <td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
        </tr>
        <tr>
            <td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
        </tr>
        <tr>
            <td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
        </tr>
    </table>

使用Javascript：

        function process(){
            var parent = $("#classes tr:last-child").closest('tr');
            var tr = parent.clone();
            if($("#classes tr:last-child td:last-child input").val() !== '')
            {
                $("#classes").append(tr);
            }
            else if($("#classes tr:last-child td").eq(0).find("input").val() === '' && $("#classes tr:last-child td").eq(1).find("input").val() === '' && $("#classes tr:last-child td").eq(2).find("input").val() === '')
            {
                $("#classes tr:last-child").remove();
            }
        }

在最后一个输入字段中添加新行onkeyup

2 个答案: