Как скрыть конкретный tr: nth-child (6) на основе содержимого tr: nth-child (7)> ​​td: nth-child (2) - PullRequest
Новая
       13

Как скрыть конкретный tr: nth-child (6) на основе содержимого tr: nth-child (7)> ​​td: nth-child (2)

0 голосов
/ 28 ноября 2018

Я хотел бы скрыть с помощью javascript определенного дочернего элемента: 

#table-detail > tbody > tr:nth-child(10)

в зависимости от содержимого другого определенного предшествующего дочернего элемента: 

#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)

Я могу скрыть дочерний элемент следующим образом:

$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');

но я понятия не имею, как проверить содержимое предыдущего дочернего элемента (если дочерний элемент 

#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine

, то скрыть дочерний элемент X.

Пожалуйста, найдитедалее таблица: 

<table id="table-detail" class="table table-striped">
<tbody>
    <tr>
        <td># Commande</td>
        <td>26</td>
    </tr>
    <tr>
        <td>Statut Commande</td>
        <td>Non traitée</td>
    </tr>
    <tr>
        <td>Statut Laboratoire</td>
        <td>Assignée</td>
    </tr>
    <tr>
        <td>Nom</td>
        <td>Client Deux</td>
    </tr>
    <tr>
        <td>Nature</td>
        <td>Client Mage</td>
    </tr>
    <tr>
        <td>Date Retrait</td>
        <td></td>
    </tr>
    <tr>
        <td>Catégorie</td>
        <td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
    </tr>
    <tr>
        <td>Produit</td>
        <td>Abricots</td>
    </tr>
    <tr>
        <td># Personnes</td>
        <td>10</td>
    </tr>
    <tr> <- CHILD ELEMENT TO HIDE
        <td>Taille (cm)</td>
        <td>16</td>
    </tr>
    <tr>
        <td>Inscription</td>
        <td></td>
    </tr>
    <tr>
        <td>Décoration petites fleurs</td>
        <td>undefined</td>
    </tr>
    <tr>
        <td>Décoration Chocolat et fruits</td>
        <td>undefined</td>
    </tr>
    <tr>
        <td>Nombre de sandwiches</td>
        <td></td>
    </tr>
    <tr>
        <td>Poids</td>
        <td></td>
    </tr>
    <tr>
        <td>Sandwiches 1</td>
        <td></td>
    </tr>
    <tr>
        <td>Sandwiches 2</td>
        <td></td>
    </tr>
    <tr>
        <td>Sandwiches 3</td>
        <td></td>
    </tr>
    <tr>
        <td>Sandwiches 4</td>
        <td></td>
    </tr>
    <tr>
        <td>Couleur du ruban</td>
        <td></td>
    </tr>
    <tr>
        <td>Prix</td>
        <td>58</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>0</td>
    </tr>
</tbody>

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

Вы можете проверить, содержит ли эта ячейка определенный текст, используя :contains и скрыть эту другую ячейку, используя hide(): 

$(function() {
  var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
  if (found) {
    $("#table-detail > tbody > tr:nth-child(10)").hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table-detail" class="table table-striped">
  <tbody>
    <tr>
      <td># Commande</td>
      <td>26</td>
    </tr>
    <tr>
      <td>Statut Commande</td>
      <td>Non traitée</td>
    </tr>
    <tr>
      <td>Statut Laboratoire</td>
      <td>Assignée</td>
    </tr>
    <tr>
      <td>Nom</td>
      <td>Client Deux</td>
    </tr>
    <tr>
      <td>Nature</td>
      <td>Client Mage</td>
    </tr>
    <tr>
      <td>Date Retrait</td>
      <td></td>
    </tr>
    <tr>
      <td>Catégorie</td>
      <td>Tarte-fine</td>
      <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
    </tr>
    <tr>
      <td>Produit</td>
      <td>Abricots</td>
    </tr>
    <tr>
      <td># Personnes</td>
      <td>10</td>
    </tr>
    <tr>
      <!-- CHILD ELEMENT TO HIDE -->
      <td>Taille (cm)</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Inscription</td>
      <td></td>
    </tr>
    <tr>
      <td>Décoration petites fleurs</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>Décoration Chocolat et fruits</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>Nombre de sandwiches</td>
      <td></td>
    </tr>
    <tr>
      <td>Poids</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 1</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 2</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 3</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 4</td>
      <td></td>
    </tr>
    <tr>
      <td>Couleur du ruban</td>
      <td></td>
    </tr>
    <tr>
      <td>Prix</td>
      <td>58</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>0</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 28 ноября 2018

В качестве альтернативы это код, который делает то, что вам нужно, без использования jquery.Это, кстати, более надежное решение, поскольку вам не нужно знать числовой порядок строк, содержащих ячейку, которую вы хотите проверить, и ячейку, которую вы хотите скрыть. 

const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';

let check = Object.keys(rows).filter(key => {
 return rows[key].children[1].innerHTML === textToCheck
});

if(check.length > 0){
 let hide = Object.keys(rows).filter(key => {
  return rows[key].children[0].innerHTML === childTextOfTheElementToHide
 }); 
 rows[hide].style.display = 'none';
}
0 голосов
/ 28 ноября 2018

Вам нужно использовать селектор :contains(), чтобы элемент выбора имел специальное текстовое содержимое. 

$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');

Также вы можете упростить код и использовать селектор :eq() вместо :nth-child

$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');


$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
  <tbody>
    <tr>
      <td># Commande</td>
      <td>26</td>
    </tr>
    <tr>
      <td>Statut Commande</td>
      <td>Non traitée</td>
    </tr>
    <tr>
      <td>Statut Laboratoire</td>
      <td>Assignée</td>
    </tr>
    <tr>
      <td>Nom</td>
      <td>Client Deux</td>
    </tr>
    <tr>
      <td>Nature</td>
      <td>Client Mage</td>
    </tr>
    <tr>
      <td>Date Retrait</td>
      <td></td>
    </tr>
    <tr>
      <td>Catégorie</td>
      <td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
    </tr>
    <tr>
      <td>Produit</td>
      <td>Abricots</td>
    </tr>
    <tr>
      <td># Personnes</td>
      <td>10</td>
    </tr>
    <tr> <!-- CHILD ELEMENT TO HIDE -->
      <td>Taille (cm)</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Inscription</td>
      <td></td>
    </tr>
    <tr>
      <td>Décoration petites fleurs</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>Décoration Chocolat et fruits</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>Nombre de sandwiches</td>
      <td></td>
    </tr>
    <tr>
      <td>Poids</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 1</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 2</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 3</td>
      <td></td>
    </tr>
    <tr>
      <td>Sandwiches 4</td>
      <td></td>
    </tr>
    <tr>
      <td>Couleur du ruban</td>
      <td></td>
    </tr>
    <tr>
      <td>Prix</td>
      <td>58</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Обратите внимание, что :contain() в некоторых случаях возвращает нежелательный результат, поэтому вы можете использовать .filter() вместо 

$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
  return $(this).text() == "Tarte-fine";
}).css('display', 'none');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...