Where Am I In Table Rows

[mike]

If I have a table defined with multi-level rows I'd like to change the
first level row color background. So the table looks like:
<table id="mytable">
<tr>
<td><table><tr><td></td></tr></table></td>
<td><td>
<td><table><tr><td></td></tr><tr><td></td></tr></table></td>
</tr>
..
..
..
</table>

My javascript looks like:

mtable=document.getElementById("mytable");
mtr=mtable.getElementsByTagName("tr");
for ( var i=0; i<mtr.length; i++ )
{
//here I need to check what level I am to
//decide to change the background color
if ( )
{
mtr.style.backgroundColor='##ff0000';
}
}

and you can see I need to check to see where i am in the structure. Of
course all the objects I pulled are <tr>'s so I think I have lost my
relationship.

Any ideas here?

Mike

 

[web.dev]

If I have a table defined with multi-level rows I'd like to change the
first level row color background. So the table looks like:
<table id="mytable">
<tr>
<td><table><tr><td></td></tr></table></td>
<td><td>
<td><table><tr><td></td></tr><tr><td></td></tr></table></td>
</tr>
.
.
.
</table>

My javascript looks like:

mtable=document.getElementById("mytable");
mtr=mtable.getElementsByTagName("tr");
for ( var i=0; i<mtr.length; i++ )
{
//here I need to check what level I am to
//decide to change the background color
if ( )
{
mtr.style.backgroundColor='##ff0000';
}
}

and you can see I need to check to see where i am in the structure. Of
course all the objects I pulled are <tr>'s so I think I have lost my
relationship.

Any ideas here?

Mike

Hi Mike,

If you're looking to change only the first level row why not just do
this:

mtable = document.getElementById("mytable");
mtr = mtable.getElementsByTagName("tr");

mtr[0].style.backgroundColor = '#ff0000';

The index 0 always denotes the first row, unless there isn't one of
course. But if you still want it in the for loop:


for ( var i = 0; i < mtr.length; ++i)
{
//here I need to check what level I am to
//decide to change the background color
if (i == 0)
{
mtr.style.backgroundColor = '#ff0000';
}
}

But IMO, that's just wasting loop time. Hope this helps.

 

[RobG]

If I have a table defined with multi-level rows I'd like to change the
first level row color background. So the table looks like:
<table id="mytable">
<tr>
<td><table><tr><td></td></tr></table></td>
<td><td>
<td><table><tr><td></td></tr><tr><td></td></tr></table></td>
</tr>
.
.
.
</table>

My javascript looks like:

mtable=document.getElementById("mytable");

mtable.rows[0].style.backgroundColor = '#ff0000';

[...]