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

Posted 2023-02-22

【中文标题】使用 jQuery 将新行追加到表中 [重复]

【英文标题】：Append a new row to a table using jQuery [duplicate]

【发布时间】：2015-08-25 21:46:34

【问题描述】：

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

$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">[e-mail]</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">[e-mail]</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

【参考方案1】：

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

demo

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

class='hidden' 

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