使用查询获取 HTML 表格 <thead> 元素答案

【问题标题】：Get the HTML table <thead> element using query使用查询获取 HTML 表格 <thead> 元素
【发布时间】：2013-01-28 02:42:50
【问题描述】：

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

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

    <tbody>

    </tbody>
</table>

尽管我试图以这种方式获取附加新元素的引用：

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

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

【问题讨论】：

也可以简写为$("thead tr", "#grid").append("<th> elem </th>");
@ChristoferEliasson，那会更慢。上下文搜索被转换为 find 。
@RoyiNamir 可能对性能造成轻微影响，但在我看来更紧凑且更易于阅读。
我同意。但尝试要求替换 regex 中的字符串和 100K 的 cmets - 它很慢。所以......没关系。只是要注意..:-)
我敢打赌没有包含 jquery

标签： javascript jquery html html-table

【解决方案1】：

你的代码没问题

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

你确定吗？见附件。

【讨论】：

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

【讨论】：

请不要在答案中包含 CDATA cruft/dodgy doctypes - 请记住，您是在鼓励他人复制和粘贴您的代码！（编辑：我已经整理好了）
@RichBradshaw，感谢您的编辑，但在示例中是否有关于 DOCTYPE 和 CDATA 之类的既定政策？或者这纯粹是基于个人喜好。因为我最初发布的版本和您的 HTML5 版本一样有效。我知道那里有一个 HTML5 福音派队伍，但我设置的 DOCTYPE 和相应的 CDATA 是有效的。任何人从该页面（或任何页面）获取纯代码并且不根据他们的喜好或需求进行清理，这不是任何人都可以控制的。
我不敢说实话——对刚开始的人来说似乎有点不公平——很多人从第一次学习编码时就养成了坏习惯。例如，CDATA 仅在 XML 文档中需要——作为 HTML != XML，除非您使用 XHTML1.1 和 application/xml+xhtml，否则就不需要了。为 Google 的 API 使用最新的 jQuery 意味着它不会被缓存，从而否定了使用它的意义——总是指定一个版本（至少是 1.9 之类的高级版本）。
content="text/html; charset=utf-8" 之类的东西显然是错误的（我知道它们很常见并且可以解析，但很明显它应该是 content="text/html" charset="utf-8"。与 type='text/javascript' 类似 - 这一直是默认值——为什么要指定它？我想简而言之，到处挂在网站上的护身符的数量需要消亡。抛开争论不谈，它是不需要的，在许多情况下从未需要，并且对于初学者来说使事情变得复杂。
顺便说一句，这不是对您的“攻击”——只是让我感到困扰的是代码仍然是这样编写的。我在 meta 上问过我们是否应该为人们回答一些提示。另外，出于兴趣，您通常会编写这样的代码，还是因为您认为应该将其包含在此站点上而添加它？

【解决方案3】：

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

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

将代码移到正文末尾，就在您的结束正文标记 </body> 之前。然后你知道你选择的元素在 DOM 中。
将代码包装在 DOM 就绪回调中，以确保在执行代码之前 DOM 已就绪。

使用 DOM 就绪回调的示例：

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

【讨论】：