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[i].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]

mike wrote:

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[i].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[i].style.backgroundColor = '#ff0000';
}
}

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

[RobG]

mike wrote:

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';

[...]
--
Rob

[Danny]

Table elements have a rows[] collection, so, mtr.rows[i] will suffice, as
for looping through it, it really depends on where you are triggering the
event and what event is it, you may or may not need to loop so much.
Danny