时间戳

首页 > 解决方案 > 与 :has() 在 jQuery 中以具有嵌套表的父表为目标的相反是什么

html - 与 :has() 在 jQuery 中以具有嵌套表的父表为目标的相反是什么

问题描述

我有一个嵌套表如下 -

<table class="table parent">
<tbody>
    <tr>
    <td>TEXTA</td>
    <td>TEXTB</td>
    </tr>
    <tr>
    <td>Has nested table below
        <table class="table nested">
        <tbody>
        <thead>
        <th>S.No.</th>
        <th>Name</th>
        <th>Contact</th>
        </thead>
        <tr>
        <td>1</td>
        <td>ABC</td>
        <td>PQR</td>
     </tr>
     </tbody>
     </table>
     </td>
     </tr>
   <tr>
    <td>TEXTC</td>
    <td>TEXTD</td>
    </tr>
</tbody>
</table>

如果我只想为嵌套表的 td 添加背景，我可以编写如下内容 -

$( "td" ).has( "table" ).css( "background-color", "red" );

但我只想选择没有嵌套表的父 td 或 td，我该如何实现呢？

我基本上只是想改变那些不包含嵌套表的 td 的宽度。所以，在这种情况下，只有包含 TEXTA 和 TEXTC 的 td 的宽度应该改变。

如果有办法单独通过 CSS 实现这一点，请告诉我。

提前致谢 ！！

标签： htmljquery

解决方案

您可以使用td'sDescendant Selector以及table.not(':has("table")')

$(".parent > tbody > tr > td").not(':has("table")').css("background-color", "red");

现场演示：

$(".parent> tbody > tr > td").not(':has("table")').css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
  <tbody>
    <tr>
      <td>TEXTA</td>
      <td>TEXTB</td>
    </tr>
    <tr>
      <td>Has nested table below
        <table class="table nested">
          <tbody>
            <thead>
              <th>S.No.</th>
              <th>Name</th>
              <th>Contact</th>
            </thead>
            <tr>
              <td>1</td>
              <td>ABC</td>
              <td>PQR</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>TEXTC</td>
      <td>TEXTD</td>
    </tr>
  </tbody>
</table>

推荐阅读