如何防止嵌套表

$(function(){ 

       $("tr:even").addClass("even"); 
       $("tr:odd").addClass("odd"); 


      }) 


    <table> 
     <tr> 
      <td>A</td> 
     </tr> 
     <tr> 
      <td> 
       <table> 
        <tr><td>A-1</td></tr> 
        <tr><td>A-2</td></tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td>B</td> 
     </tr> 
    </table>

加入偶/奇班運行上面的代碼，奇/偶類已被添加到嵌套表，如：如何防止嵌套表

<table> 
    <tr class="even"> 
     <td>A</td> 
    </tr> 
    <tr class="odd"> 
     <td> 
      <table> 
       <tr class="even"><td>A-1</td></tr> 
       <tr class="odd"><td>A-2</td></tr> 
      </table> 
     </td> 
    </tr> 
    <tr class="even"> 
     <td>B</td> 
    </tr> 
</table>

我應該做怎樣的改變使奇/偶類不在嵌套表，如下輸出：

<table> 
    <tr class="even"> 
     <td>A</td> 
    </tr> 
    <tr class="odd"> 
     <td> 
      <table> 
       <tr><td>A-1</td></tr> 
       <tr><td>A-2</td></tr> 
      </table> 
     </td> 
    </tr> 
    <tr class="even"> 
     <td>B</td> 
    </tr> 
</table>

來源

2011-09-16 Acubi

舉一個id你的外部表，然後使用child selector：

$("#yourTable > tbody > tr:even").addClass("even"); 
$("#yourTable > tbody > tr:odd").addClass("odd");

子選擇器只選擇直接子元素，而不是所有子元素（當前選擇器只是選擇DOM中的所有td元素，而不管它們在哪個表中）。

來源

2011-09-16 10:12:12

記住，許多，如果不是全部，瀏覽器添加一個'tbody'元素'tables'遏制'tr'元素。 –

@大衛 - 非常真實，編輯。 –

如果你有過，你可以添加類要排除的行HTML控件，然後指定類在一個「不」 selctor在你的jQuery選擇 -

jQuery的

$("tr:not(.inner):even").addClass("even"); 
$("tr:not(.inner):odd").addClass("odd");

HTML

<table> 
     <tr> 
      <td>A</td> 
     </tr> 
     <tr class="inner"> 
      <td> 
       <table > 
        <tr class="inner"><td>A-1</td></tr> 
        <tr class="inner"><td>A-2</td></tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td>B</td> 
     </tr> 
    </table>

這將適用於任何風格的「TR 'conatining嵌套表，所以奇怪的風格將被應用於'A'，甚至風格將被應用於'B'。

工作演示 - http://jsfiddle.net/yPbfq/

來源

2011-09-16 10:14:25 ipr101

如何防止嵌套表

回答

相關問題