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

Add new row onkeyup inside last input field

本文关键字:添加 新行 onkeyup 字段 最后一个 输入      更新时间:2023-09-26

假设我在一个表中有3行,每行有3个输入字段。当我在最后一个输入字段中输入内容时它应该在最后一行后面添加新行当我按退格键并且最后一行中的所有字段都为空时那么新添加的行应该是remove

我不知道如何防止另一个添加,如果新的行已经追加到表。这是我目前为止所做的。

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

通过再次选择最后一个元素来检查如何,并将其与this进行比较?如果不相同,则表示已经添加了一行

你的意思是:

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