javascript во вложенной таблице

Question

Я написал программу и хотел бы сделать вещь (CSS/JavaScript) во вложенной таблице, но я встретил некоторую проблему.

Я хотел бы показать что-то в нечетном tr элемент в tbody, который:

<tr> 
    <th>0</th> 
    <th>Match Key</th> 
    <th>Marketing</th> 
</tr> 

и

<tr> 
    <th>1</th> 
    <th>Match Key</th> 
    <th>Marketing</th> 
</tr> 

в моей программе, но когда я использую JavaScript или CSS, оно будет применяться к дочерней таблице.

Как я могу избежать детской таблицы в JavaScript и CSS?

JsFiddle

Answer 1

Если вы хотите стиль применить, скажем, стол-клетки в #report, но не относится к ячейке во вложенной таблице, вы можете использовать это:

#report > tbody > tr > td{ /*some styles*/ } 

> символ в селекторе CSS называется селектором ребенка

Так, например #reports > tbody > tr выбирает только настольную строку, которая является прямым потомком в tbody, который является прямым потомком в #reports

Answer 2

DEMO

#report > tbody > tr:nth-child(2n+1) > th{ 
     background-color: #f00; 
} 

Answer 3

вы должны предназначаться немедленным ребенком в tbody с>

#report > tbody > tr:nth-child(odd) > th{ 
     background-color: #f00; 
} 

Jsfiddle

для использования JQuery тот же селектор, как описано выше для целевой th

, если вы используете Javascript добавить класс «сверху» на верхний уровень <tr> и это должно работать: jsfiddle

var tb = document.getElementById('report').getElementsByTagName('tbody')[0]; 
var trs = tb.getElementsByTagName('tr'); 
var newtr = new Array(); 
var count = 0; 
for(i = 0;i<trs.length;i++){ 
    if(trs[i].className == 'top'){ 
     newtr[count] = trs[i]; 
     count++; 
    } 

} 
for(i=0;i<newtr.length;i++){ 
    console.log(i) 
    if(i%2 == 0){ 
     for(k=0;k<newtr[i].getElementsByTagName('th').length;k++){ 
      newtr[i].getElementsByTagName('th')[k].style.background = 'red'; 
     } 
    } 
} 

Answer 4

Вот JavaScript Решение.

JavaScript

var tr = document.getElementsByTagName('tr'), 
    totalTr = tr.length; 

for(var i = 0; i <= totalTr; i++){ 
    if(i%2 === 0){ 
     tr[i].className = 'odd'; 
    } 
} 

HTML

<table width="500"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
</table> 

CSS

.odd{background:#e5e5e5;} 

Fiddle Demo