代码之家  ›  专栏  ›  技术社区  ›  melaos

jquery如何只显示这个表结构中的特定td?

  •  1
  • melaos  · 技术社区  · 15 年前

    我不知道怎么查出来。

    我有一个这样的表格结构:

    <table class="wba_main_table" align="center" border="0" cellpadding="0" cellspacing="0" width="">
          <tbody>
            <tr>
              <td style="display: none;" id="wba_logo_bg">
              </td>
            </tr>
            <tr>
              <td style="display: none;" class="line">
              </td>
            </tr>
            <tr>
              <td class="wba_topnavBG">
              <table>
              <tr><td>bla bla bla</td></tr> 
              </table>
              </td>
            </tr>
            <tr>
              <td style="display: none;" class="line">
              </td>
            </tr>
            <tr style="display: none;" class="greyBar">
              <td>
              </td>
            </tr>
            <tr>
              <td style="display: none;" class="line">
              </td>
            </tr>
            <tr>
              <td style="display: none;" class="lightGreyBar">
              </td>
            </tr>
            <tr>
                 <td><table><tbody><tr><td>
                     <div id="deep_div1"></div>
                 </td></tr></tbody></table></td>
            </tr>
    </table>
    

    我要做的是隐藏所有的tr,除了包含 wba_topnavBG . 我的策略是使用 wba_logo_bg 作为ID并选择父项,然后从中选择所有没有类的子项td 乌巴托波布格 hide() 它们都是,但我不知道如何编写选择部分。

    有什么帮助吗?:)

    编辑

    忘了在这个td中添加另一个具有更多tr和td的表结构。

    编辑2

    嗯,现在看来我必须隐藏另一个包含一个ID为的DIV表的tr。可以修改jquery行来添加另一个要在其中查找的内容:has syntax吗?

    1. 我怎样才能隐藏另一个tr,除了 对于包含DIV的 deep_div1 还有TD班的那个 乌巴托波布格 ?

    由于这个新的扭曲仍然与这个问题相关,所以我不想在堆栈溢出中创建另一个问题。

    1 回复  |  直到 8 年前
        1
  •  6
  •   Christian C. Salvadó    15 年前

    您可以将 :not :has 伪选择器:

    $('.wba_main_table tr:not(:has(td.wba_topnavBG))').hide();
    

    此选择器将匹配所有 tr 不包含 td 带类的元素 wba_topnavBG .

    用标记检查示例 here .

    编辑: 作为对您的评论的回应,如果您在其中有一个表 TD ,您只想选择直接 TR 后代 .wba_main_table ,您应该使用 parent > child 选择器:

    $('.wba_main_table > tr:not(:has(td.wba_topnavBG))').hide();