如何根据 tr:nth-child(7) > td:nth-child(2) 的内容隐藏特定的 tr:nth-child(6)

Posted 2023-05-09

技术标签:

【中文标题】如何根据 tr:nth-child(7) > td:nth-child(2) 的内容隐藏特定的 tr:nth-child(6)【英文标题】：How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2) 【发布时间】：2019-04-30 11:51:48 【问题描述】：

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

【问题讨论】：

如果第 7 行包含特定文本，您不应该隐藏第 10 行吗？ 【参考方案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 &gt; tbody &gt; tr:nth-child(7) &gt; 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');

【讨论】：

嗨 Mohammad，非常感谢这个运行良好的代码提案，我通过 .filter 学到了一些新东西！还要感谢 saulpaul 和 Salman。【参考方案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>

【讨论】：

【参考方案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-child(2) 的内容隐藏特定的 tr:nth-child(6)的主要内容，如果未能解决你的问题，请参考以下文章