使用 jQuery 将新行追加到表中 [重复]答案

【问题标题】：Append a new row to a table using jQuery [duplicate]使用 jQuery 将新行追加到表中 [重复]
【发布时间】：2015-08-25 21:46:34
【问题描述】：

我正在使用以下代码尝试向 jquery 追加一个新行，但它不起作用。

$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test@test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');

我的桌子是这样设置的：

<table class="view-bookings-table mobile-optimised hidden" id="search-results">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Phone Number</th>
            <th scope="col">Car Reg.</th>
            <th scope="col">Time</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

编辑

我的完整代码其实是：

$('#search').submit(function(event) {
    event.preventDefault();
    $('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test@test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
});

【问题讨论】：

Your code works fine。你包括 jQuery 吗？这个脚本在哪里/何时被调用？
我刚刚添加了我的完整代码，因为它包含在可能与它有关的提交中？
如果您使用提交，我已经在工作的代码应该放在带有 id 搜索的表单中。或者尝试通过按钮首先单击它来测试您的代码。
似乎工作正常？ jsfiddle.net/n2L9t6qf

标签： javascript jquery

【解决方案1】：

您的代码很好，并且适用于所有可能的 jQuery 版本。

demo

您的页面上的其他地方可能有 jQuery 错误，或者您没有加载它。还有什么是

class='hidden'

在做什么？也许这只是一个 CSS 问题？

【讨论】：