如何根据tr:nth-child(7)>td:nth-[=13=的内容隐藏具体的tr:nth-child(6) ](2)

Question

我想用 javascript 隐藏一个特定的 child :

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

根据另一个具体前面的内容 child :

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

我可以隐藏 child 如下：

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

但我不知道如何检查前面的 child 的内容（如果 child 元素

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

然后隐藏 child 元素 X。

请在下面查找 table :

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

Answer 1

您需要使用:contains() select或者select元素有特殊的文本内容。

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

您还可以简化代码并使用 :eq() select 或代替 :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() return 不需要的结果，因此您可以使用 .filter() 代替

$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
  return $(this).text() == "Tarte-fine";
}).css('display', 'none');

Answer 2

您可以使用 :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>

Answer 3

作为替代方案，这是无需使用 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';
}

如何根据tr:nth-child(7)>td:nth-[=13=的内容隐藏具体的tr:nth-child(6) ](2)

How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2)

html

javascript

css

jquery

jquery-selectors