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

问题描述 投票：0回答：3

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

javascript jquery html css jquery-selectors
3个回答
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
投票

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

作为替代方案，这是在不使用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';
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.