如何在包含col元素的主体中选择tr

JQuery: How to select tr in tbody containing col elements?

本文关键字：主体 选择 tr 元素 包含 col      更新时间：2023-09-26

我试图隐藏表内包含coltag表体的行，但我不能做到这一点。如果我从主体中删除col标记，代码就可以完美地工作。

<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标签的body中获得tr对象吗?

@Zsw是的，我也可以在表上放一个id - 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();
});

演示

对此做了一些额外的研究

你的选择器在<tbody>上不能与id一起工作的原因是因为你的html在技术上不是有效的。

<col>不应该放在<tbody>里面。相反，它们应该在<colgroup>中。您的表在后台被转换为:

<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>

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

演示

col元素不允许出现在tbody中。如果您检查表，您将看到id为"fbody"的tbody不包含任何tr元素。

将col元素移动为table的直接子元素，您的代码将按原样工作:

小提琴

使用此选择器隐藏

 $("#fbody:has(col)  tr").hide();
相关文章：