JQuery селекторы для четных / нечетных строк в таблице - PullRequest
Новая
       1

JQuery селекторы для четных / нечетных строк в таблице

5 голосов
/ 12 июля 2011

Код в первом блоке кода является исходным кодом.После запуска исходного кода.Код будет изменен (см. 2-й блок кода).

Я хочу, чтобы класс (т. Е. «Четный» и «нечетный») тега отображался только в «таблице1».Однако в настоящее время таблица гнезд (т. Е. Table2) также имеет классы 'even' и 'odd' для каждого тега.

Может кто-нибудь мне помочь?Заранее спасибо.

----------- Первый блок кода -------------- 

<head>
<script type="text/javascript">
            $(document).ready(function(){
                $("#table1 tr:odd").addClass("odd");
                $("#table1 tr:not(.odd)").addClass("even");  
            });
</script>
</head>

<body>

<table id="table1">
    <tr>
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>
            <table id="table2">
                   <tr></tr>
                   <tr></tr>
            <table>
        </td>
    </tr>

</table>
</body>

----------- 2-й блок кода --------------- 

<table id="table1">
    <tr class="even">
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr class="odd">
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr class="even">
        <td>
            <table id="table2">
                   <tr class="even"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>

Ответы [ 7 ]

14 голосов
/ 12 июля 2011

Все опубликованные ответы почти правильные .. 

$(document).ready(function(){
    $("#table1 > tbody > tr:odd").addClass("odd");
    $("#table1 > tbody > tr:not(.odd)").addClass("even");  
});

Многие браузеры автоматически добавляют tbody к вашей таблице, даже если вы не добавляете ее самостоятельно. Так что #table1 > tr не будет совпадать, потому что tr не является прямым потомком table. Лучше всего использовать вышеприведенное и явно добавить tbody для тех браузеров, которые этого не делают. 

 <table id="table1">
      <tbody>
        <tr class="even">
            <td>AAA</td>
            <td>CCC</td>
        </tr>
        <tr class="odd">
            <td>BBB</td>
            <td>DDD</td>
        </tr>
        <tr class="even">
            <td>
                <table id="table2">
                   <tbody>
                       <tr class="even"></tr>
                       <tr class="odd"></tr>
                   </tbody>
                <table>
            </td>
        </tr>
      <tbody>

</table>

http://jsfiddle.net/5ETAD/1/

1 голос
/ 12 июля 2011

Должно быть: 

$("#table1>tr:odd").addClass("odd");
$("#table1>tr:not(.odd)").addClass("even");
0 голосов
/ 08 июля 2013

Чтобы избежать избыточного обхода DOM, вы можете использовать что-то вроде этого: 

$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')
0 голосов
/ 12 июля 2011

Вам просто нужно использовать правильные селекторы CSS.Попробуйте: 

$("#table1>tr:odd").addClass("odd");
0 голосов
/ 12 июля 2011 
            $("#table1 > tr:odd").addClass("odd");
            $("#table1 > tr:not(.odd)").addClass("even");
0 голосов
/ 12 июля 2011

Используйте прямой дочерний селектор.

Также вы можете использовать: даже вместо: not (.odd) 

$(document).ready(function(){                 
  $("#table1 > tr:odd").addClass("odd");                 
  $("#table1 > tr:even").addClass("even");               
});
0 голосов
/ 12 июля 2011

Вы можете использовать следующее (обратите внимание на знак больше, чем): 

       $(document).ready(function(){
            $("#table1 > tr:odd").addClass("odd");
            $("#table1 > tr:not(.odd)").addClass("even");  
        });

Это будет выбирать только непосредственные дочерние tr.

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

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

...