追加和删除行表Jquery答案

【问题标题】：Append and remove rows table Jquery追加和删除行表Jquery
【发布时间】：2017-04-18 14:02:17
【问题描述】：

我在使用 jquery 追加表行时遇到问题，我的情况是想将新行追加到表中的最后一行，成功追加，但新行已追加到边表上，如何解决？我是新手使用这种方式。 jsfield中的示例代码，谢谢。

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

<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>

enter code here

【问题讨论】：

您想在第一个文件输入下放置新的文件输入吗？实际上，您并没有将其放在边桌中，而是将其放在同一张桌子上的新行上，以便从右侧显示。
是的，我只是在 jquery 中删除 tr:first。感谢您的信息@ReadyFreddy
欢迎您。您也可以通过打开 google dev-console 来检查这一点，并在您的脚本之后自己查看 html 代码。良好的编码。
我如何看到谷歌开发控制台？我会学。 @ReadyFreddy
在页面上时，按 Ctrl+Shift+J。在顶部菜单上，控制台显示客户端问题，如 javascript 问题，元素显示 html 代码并且它是动态的。这意味着当您运行脚本时，它会随之变化，因此您可以在脚本之后看到您的 html 代码。为了进行测试，您可以使用此代码来查看它没有将其添加到另一个表，而只是添加到另一行。

标签： jquery append

【解决方案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>

【讨论】：

啊，让我困惑，解决方案只是删除 tr: 首先，非常感谢 :) @Gary