jQuery - come selezionare un tr contenente TH di?

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

  •  22-08-2019
  •  | 
  •  

Domanda

Il titolo dice praticamente tutto.
Dato un tavolo come 

<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>

Come per selezionare la riga che contiene le intestazioni TH e nessun altro?

È stato utile?

Soluzione

Espressione: 

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

o anche solo: 

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

Esempio completo: 

<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>

Altri suggerimenti

Se possibile, sarebbe ideale per racchiudere l'intestazione tabella all'interno di una elemento 

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

In questo modo, selezionando l'intestazione tabella sarebbe semplice come: 

$('thead');

In alternativa selezionando solo il 

$('thead tr');

Il tuo markup sarebbe quindi più leggibile, e lo styling il vostro tavolo diventa più facile, come si può facilmente indirizzare elementi nell'intestazione o il corpo della tabella. 

jQuery("tr:has(th)")

selezionerà ogni tr che contiene almeno un th

kthxbye:)

Con il selettore :has: 

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

Probabilmente non funzionerà se si dispone di una tabella con th e td miscelati bambini però.

Non so se è come query Dojo CSS3, ma si potrebbe utilizzare la classe pseudo first-child, se lo supporta jQuery:

tr th: first-child

o

tr th: nth-child (1)

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top