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

您必须使用＆gt;

定位tbody的直接孩子

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

Jsfiddle

用于jquery使用与上面相同的选择器来定位th

如果您使用javascript将“top”类添加到顶级<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 3

DEMO

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

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

嵌套表中的javascript

4 个答案: