jQuery - comment sélectionner un tr contenant e de?

StackOverflow https://stackoverflow.com/questions/530513

  •  22-08-2019
  •  | 
  •  

Question

Titre à peu près dit tout.
Compte tenu d'une table comme 

<table>
  <tr>
    <th>Header 1</td>
    <th>Header 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
</table>

Comment sélectionner la ligne qui contient les en-têtes e et pas d'autre?

Était-ce utile?

La solution

Expression: 

$(function() {
  $("tr:has(th):not(:has(td))").hide();
});

ou même simplement: 

$(function() {
  $("tr:not(:has(td))").hide();
});

Exemple complet: 

<html>
<head>
  <title>Layout</title>
</head>
<body>
<table>
  <tr>
    <th>Header 1</td>
    <th>Header 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <th>Header 3</th>
    <th>Datum 2</td>
  </tr>
</table>
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:has(th):not(:has(td))").hide();
    });
  });
</script>
</body>
</html>

Autres conseils

Si possible, il serait idéal pour joindre votre tête de table dans un élément 

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

De cette façon, la sélection de votre tête de table serait aussi simple que: 

$('thead');

Ou sélectionner uniquement le 

$('thead tr');

Votre balisage serait alors plus lisible, et le style de votre table devient plus facile, comme vous pouvez cibler plus facilement des éléments dans l'en-tête ou le corps de votre table. 

jQuery("tr:has(th)")

sélectionnera tous les tr qui contient au moins un th

kthxbye:)

A l'aide du sélecteur de :has: 

$('tr:has(th)').addClass('sample')

Probablement ne fonctionnera pas si vous avez une table avec les enfants de th et td mixtes cependant.

J'sais si elle est comme Dojo requêtes CSS3, mais vous pouvez utiliser le premier enfant pseudo classe, si jQuery supporte:

tr th: first-child

ou

tr th: nième enfant (1)

Voir: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top