javascript in nested table

Question

I wrote a program, and would like to do thing (CSS/JavaScript) in nested table, but I met some problem.

I’d like to show something in the odd tr element in tbody, which is:

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

and

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

in my program, but when I use JavaScript or CSS, it will apply to the child table.

How can I escape child table in JavaScript and CSS?

JsFiddle

Faust · Accepted Answer · 2014-02-19 05:56:43Z

1

If you want styling to apply to, say, a table-cell in #report, but not apply to a cell in a nested table, you can use this:

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

the > character in the CSS selector is called the child selector

So, for example #reports > tbody > tr selects only a table-row that is a direct child of a tbody that is a direct child to #reports

answered Feb 19, 2014 at 5:56

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2014-02-19 07:26:46Z

you would have to target the immediate child of the tbody with >

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

Jsfiddle

for jquery use the same selector as above to target the th

if you are using javascript add class 'top' to the top level <tr> and this should work: 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';
        }
    }
}

kei · Accepted Answer · 2014-02-19 05:54:57Z

0

DEMO

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

answered Feb 19, 2014 at 5:54

kei

20.5k2 gold badges38 silver badges64 bronze badges

1 Comment

Jimmy Lin Over a year ago

How can I do it in Javascript with any action.

Rakesh Kumar · Accepted Answer · 2014-02-19 06:25:38Z

0

Here is the JavaScript Solution.

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

answered Feb 19, 2014 at 6:25

Rakesh Kumar

2,8631 gold badge22 silver badges37 bronze badges

Collectives™ on Stack Overflow

javascript in nested table

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related