使用 query 获取 HTML 表 <thead> 元素

Get the HTML table <thead> element using query

本文关键字：thead 元素 query HTML 使用 获取      更新时间：2023-09-26

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

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

尽管我试图让引用以这种方式附加一个新的元素：

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

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

你的代码没问题

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

你确定吗？请参阅所附的示例。

当我将其改编为独立页面时，该脚本显然有效。我在表后添加了内联脚本。 因此，也许您正在头部使用它并需要$(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>

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

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

  1. 将代码移动到正文的末尾，就在关闭正文标签</body>之前。然后，您知道要选择的元素位于 DOM 中。

  2. 将代码包装在 DOM 就绪回调中，以确保 DOM 在执行代码之前已准备就绪。

使用 DOM 就绪回调的示例：

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