0

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

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

    <tbody>

    </tbody>
</table>

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

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

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

4

3 回答 3

1

你的代码没问题

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

你确定吗 ？见附上的例子。

于 2013-01-27T18:27:45.343 回答
1

当我将其改编为独立页面时，该脚本显然可以正常工作。我在表格之后添加了内联脚本。因此，也许您在头部使用它并需要一个$(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>
于 2013-01-27T18:36:53.233 回答
0

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

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

  1. 将代码移动到正文的末尾，就在您的结束 body-tag 之前</body>。然后你知道你选择的元素在 DOM 中。

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

使用 DOM 就绪回调的示例：

$(function () {
    $("#grid thead").find("tr").append("<th> elem </th>");
});
于 2013-01-27T18:33:17.413 回答