Что противоположно:has() в jQuery для нацеливания на родительскую таблицу с вложенной таблицей

#html #jquery

#HTML #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, которые НЕ содержат вложенной таблицы. Итак, в этом случае ширина только td, содержащего TEXTA и TEXTC, должна измениться.

Если есть способ добиться этого только с помощью CSS, пожалуйста, дайте мне знать.

Заранее спасибо!!

Ответ №1:

Вы можете настроить таргетинг на родительский td's элемент, исключая вложенный 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>

1. Привет. Спасибо за ваше решение! Однако у меня есть следующий вопрос. У меня есть другой сценарий, в котором я хочу, чтобы TEXTA, TEXTC amp; «Имеет вложенную таблицу под текстом» были выделены красным цветом. Как я могу этого добиться?

2. @ItykaBandta Добро пожаловать — рад помочь. Итак, вы хотите, чтобы целевая родительская таблица textA и TextC, а также полная вложенная таблица были выделены красным цветом? это то, что вы имели в виду?

3. @ItykaBandta Хм, немного хитрый. Но позвольте мне попробовать — это возможно 🙂

4. @ItykaBandta что-то вроде этого => jsfiddle.net/836fgu5q/2

5. @ItykaBandta Нет проблем. Да, я согласен, что изменение структуры определенно необходимо, если я считаю, что существует более 15 строк. Счастливого кодирования 🙂

Ответ №2:

Просто инвертируйте его через .not() , передав ему свой :has псевдоселектор.

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

Или даже

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