追加和删除行表Jquery

Question

我有一个问题，使用jquery追加表行，我的情况是想要将新行附加到表中的最后一行，要追加成功，但是新行已附加在表格表上，如何修复它？我是这样使用的新手。 jsfield中的示例代码，谢谢。

＆＃13;

＆＃13;

var i = 1;
    $("#addbutton").click(function () {
        $("#t tr:first").append('<tr>'+
            '<td>File</td>'+
            '<td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>'+
            '<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function () {
        });
        i++;
    });

    $(document).on('click', 'button.removebutton', function () {
        $(this).closest('tr').remove();
        return false;
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t">
        <tr>
            <td>Id Gor</td>
            <td> <input type="text" name="Id Gor" id="txtTitle" name="txtTitle"></td>
            <td>&nbsp;</td>
        </tr>
         <tr>
            <td>File</td>
            <td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table>
        <tr>
            <td  style="width: 33px;"></td>
            <td style="width: 183px;">&nbsp;</td>
            <td><input type="button" id="addbutton" value="Add Row"></td>
        </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;

enter code here

Answer 1

错误是你正在使用$（“＃t tr：first”），该块正在获取表#t的第一个Row（），然后你正在向它追加到行，所以实际上你最终会得到像

这样的东西

<tr><tr></tr><tr></tr><tr></tr></tr>

要完成你想要的，只需从选择器中删除tr：first。下面是你的代码与那个小修复工作。

var i = 1;
    $("#addbutton").click(function () {
        $("#t").append('<tr>'+
            '<td>File</td>'+
            '<td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>'+
            '<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function () {
        });
        i++;
    });

    $(document).on('click', 'button.removebutton', function () {
        $(this).closest('tr').remove();
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t">
        <tr>
            <td>Id Gor</td>
            <td> <input type="text" name="Id Gor" id="txtTitle" name="txtTitle"></td>
            <td>&nbsp;</td>
        </tr>
         <tr>
            <td>File</td>
            <td> <input type="file" name="file[]" id="txtTitle" name="txtTitle"></td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <table>
        <tr>
            <td  style="width: 33px;"></td>
            <td style="width: 183px;">&nbsp;</td>
            <td><input type="button" id="addbutton" value="Add Row"></td>
        </tr>
    </table>