Question

我想使用jquery在我的html表的标题部分添加列。这是表格的定义：

<table id="grid">
    <thead>
            <tr>
        </tr>
    </thead>

    <tbody>

    </tbody>
</table>

尽管我试图通过这种方式获得引用新元素的引用：

$("#grid thead").find("tr").append("<th> elem </th>");

我仍然没有成功。我应该写什么来引用标题的第一行？谢谢你的帮助。

Answer 1

你的代码没问题

http://jsbin.com/ufiper/2/edit

你确定吗？见附图。

Answer 2

当我将其改编为独立页面时，脚本清晰可行。我在表格之后添加了内联脚本。所以也许你正在使用头部和头部。需要$(document).ready()或$(window).load()以确保代码仅在页面加载时执行？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>thead test</title>
    </head>
    <body>
        <table id="grid">
            <thead>
                <tr>
                    <td></td>
                </tr>
            </thead>
        </table>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
        $(function () {
            $("#grid thead").find("tr").append("<th> elem </th>");
        });
        </script>
    </body>
</html>

Answer 3

您提供的代码是正确的。由于它仍然不适合您，我最好的猜测是您已将此代码放在<head></head>中。由于浏览器自上而下读取代码，并且任何脚本在读取后立即执行，当它到达您的脚本时，DOM就没有准备好，因此没有元素匹配您的选择器。

有两种方法可以解决这个问题：

将代码移至正文末尾，就在关闭正文标记</body>之前。然后你知道你选择的元素是在DOM中。
将代码包装在支持DOM的回调函数中，以确保在执行代码之前DOM已准备就绪。

使用DOM-ready回调的示例：

$(function () {
    $("#grid thead").find("tr").append("<th> elem </th>");
});

使用查询获取HTML表元素

3 个答案: