如何根据tr：nth-​​child（7）> td：nth-​​child（2）的内容隐藏特定的tr：nth-​​child（6）

Question

我想用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>

Answer 1

您需要使用: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');

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';
}