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

时间：2018-11-28 14:28:08

标签： javascript jquery html css jquery-selectors

我想用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 :(得分：2)

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

答案 1 :(得分：1)

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

答案 2 :(得分：0)

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