javascript - JQuery:如何在包含 col 元素的 tbody 中选择 tr？

Question

我试图将表格的行隐藏在包含 col 标签的表格主体中，但我无法做到。如果我从 tbody 中删除 col 标签，代码将完美运行。我有如下 HTML 代码

<table>
    <tbody id="fbody">
        <col width="10px"></col>
        <col width="10px"></col>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>fooo</td>
            <td>baar</td>
        </tr>
    </tbody>
</table>

和javascript如下

$(document).ready(function () {
   $("#fbody").find("tr").hide();
});

这是 jsfiddle 的链接

谁能告诉我如何在包含 col 标签的 tbody 中获取 tr 对象？

Answer 1

@Zsw yeah i can put an id on table as well – Sachin B. R.

放一个id在 <table> 上.

<table id="ftable">
    <tbody>
        <col width="10px"></col>
        <col width="10px"></col>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>fooo</td>
            <td>baar</td>
        </tr>
    </tbody>
</table>

然后用下面的选择器隐藏它。

$(document).ready(function () {
    $("#ftable tr").hide();
});

Demo

---

对此做了一些额外的研究

您的选择器无法使用 id 的原因在 <tbody> 上是因为您的 html 在技术上无效。

<col>不应该放在<tbody>里面.相反，它们应该在 <colgroup> 中。 .您的 table 在幕后被转换成这样:

<table>
    <tbody id="fbody">
        </tbody><colgroup><col width="10px">
        <col width="10px">
        </colgroup><tbody><tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>fooo</td>
            <td>baar</td>
        </tr>
    </tbody>
</table>

因此，当您尝试选择 #fbody 时，你找不到任何东西。相反，您的表格应该是这样的:

<table>
    <colgroup>
        <col width="10px"></col>
        <col width="10px"></col>
    </colgroup>
    <tbody id="fbody">
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>fooo</td>
            <td>baar</td>
        </tr>
    </tbody>
</table>

现在您的原始代码也可以工作了!

Demo