jQuery - как выбрать tr, который содержит th? - PullRequest
Новая
       10

jQuery - как выбрать tr, который содержит th?

6 голосов
/ 10 февраля 2009

Название в значительной степени говорит само за себя.
Учитывая таблицу как 

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

Как выбрать строку, содержащую заголовки th и никаких других?

Ответы [ 5 ]

25 голосов
/ 10 февраля 2009

Выражение: 

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

или даже просто: 

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

Полный пример: 

<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>
7 голосов
/ 10 февраля 2009

Если возможно, было бы идеально заключить заголовок таблицы в элемент 

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

Таким образом, выбор заголовка таблицы будет простым: 

$('thead');

Или выберите только 

$('thead tr');

В этом случае ваша разметка станет более читабельной, а стилизация вашей таблицы станет проще, так как вы сможете легче ориентироваться на элементы в заголовке или теле таблицы.

4 голосов
/ 10 февраля 2009 
jQuery("tr:has(th)")

выберет каждый tr, который содержит хотя бы один th

kthxbye:)

2 голосов
/ 10 февраля 2009

Используйте селектор :has: 

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

Вероятно, не будет работать, если у вас есть таблица со смешанными th и td детьми, хотя.

1 голос
/ 10 февраля 2009

Не знаю, если это похоже на запросы Dojo CSS3, но вы можете использовать псевдо-класс first-child, если jQuery его поддерживает:

тр-й: первый ребенок

или

троеч: nth-child (1)

См .: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...