Highlighting Rows

07-16-2007

To highlight the table's row with onmouseover/onmouseout events I use
2 functions which switch rows' class names. How can I highlight the
same rows, if every cell of the row contains various class names?

If cell has a CSS class name with some BG color, row's BG color is no
longer visible. I tried a function to loop through every cell of the
row and remove className onmouseover and apply back onmouseout. But
that generates error that className property is not found, even though
it is there. There are a lot of problems like that when I googled for
"error getting className property".

Is anyone aware of this situation and what to do? How to highlight row
with cells having different class names?
Thanks

07-16-2007

On Jul 16, 2:43 pm, vunet...@gmail.com wrote:
> To highlight the table's row with onmouseover/onmouseout events I use
> 2 functions which switch rows' class names. How can I highlight the
> same rows, if every cell of the row contains various class names?
>
> If cell has a CSS class name with some BG color, row's BG color is no
> longer visible. I tried a function to loop through every cell of the
> row and remove className onmouseover and apply back onmouseout. But
> that generates error that className property is not found, even though
> it is there. There are a lot of problems like that when I googled for
> "error getting className property".

Can't help you there as you didn't post any code. But, if all of your
cell's have different colors, then perhaps you shouldn't obscure this
distinction in your rollover effect.

07-16-2007

On Jul 16, 2:43 pm, vunet...@gmail.com wrote:
> To highlight the table's row with onmouseover/onmouseout events I use
> 2 functions which switch rows' class names. How can I highlight the
> same rows, if every cell of the row contains various class names?
>
> If cell has a CSS class name with some BG color, row's BG color is no
> longer visible. I tried a function to loop through every cell of the
> row and remove className onmouseover and apply back onmouseout. But
> that generates error that className property is not found, even though
> it is there. There are a lot of problems like that when I googled for
> "error getting className property".
>
> Is anyone aware of this situation and what to do? How to highlight row
> with cells having different class names?
> Thanks

Not sure how you have your code setup but you can try this:

function highlightTableRow(tblTemp)
{//highlight table rows
var tr = tblTemp.getElementsByTagName('tr');
for(var j = 0; j < tr.length; j++)
{//only rows in <TBODY> tags
if(tr[j].parentNode.nodeName == 'TBODY')
{
tr[j].onmouseover = function()
{
this.style.background = '#9cf';
return false;
}

tr[j].onmouseout = function()
{
this.style.background = '';
return false;
}
}
}
}

<table id="tblMyTable">
....
<tbody>
...//these rows get highlighted with mouseover event
</tbody>
</table>

<script language="javascript">
highlightTableRow(tblMyTable)
</script>

07-16-2007

On Jul 16, 3:20 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Jul 16, 2:43 pm, vunet...@gmail.com wrote:
>
> > To highlight the table's row with onmouseover/onmouseout events I use
> > 2 functions which switch rows' class names. How can I highlight the
> > same rows, if every cell of the row contains various class names?
>
> > If cell has a CSS class name with some BG color, row's BG color is no
> > longer visible. I tried a function to loop through every cell of the
> > row and remove className onmouseover and apply back onmouseout. But
> > that generates error that className property is not found, even though
> > it is there. There are a lot of problems like that when I googled for
> > "error getting className property".
>
> Can't help you there as you didn't post any code. But, if all of your
> cell's have different colors, then perhaps you shouldn't obscure this
> distinction in your rollover effect.

copy-paste code demonstrates the problem: only last row is
highllighted...

<html><head>
<title>Simple example</title>
<style type="text/css">
..blue{background-color:lightblue;}
..red{background-color

range;}
..yellow{background-color:lightyellow;}
..tableRowOver{background-color:gold;}
..tableRrow{}
</style>
<script language="JavaScript">
function start(){
var d = document.getElementById("myDiv");
d.innerHTML = "<table width='100%'><tr onmouseover='hilite(this)' "+
"onmouseout='lolite(this)'><td class='blue'>blue</td>"+
"<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
"<tr onmouseover='hilite(this)' onmouseout='lolite(this)'>"+
"<td class='blue'>blue</td>"+
"<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
"<tr onmouseover='hilite(this)'onmouseout='lolite(this) '><td
class='blue'>blue</td>"+
"<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
"<tr onmouseover='hilite(this)'onmouseout='lolite(this) '><td>empty</
td>"+
"<td>empty</td><td>empty</td></tr></table>";
}
function hilite(row){row.className = 'tableRowOver';}
function lolite(row){row.className = 'tableRow';}
</script>
</head>
<body ONLOAD="start()">
<div id='myDiv'></div>
</body>
</html>

07-16-2007

On Jul 16, 5:13 pm, vunet...@gmail.com wrote:
> On Jul 16, 3:20 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
>
>
>
>
> > On Jul 16, 2:43 pm, vunet...@gmail.com wrote:
>
> > > To highlight the table's row with onmouseover/onmouseout events I use
> > > 2 functions which switch rows' class names. How can I highlight the
> > > same rows, if every cell of the row contains various class names?
>
> > > If cell has a CSS class name with some BG color, row's BG color is no
> > > longer visible. I tried a function to loop through every cell of the
> > > row and remove className onmouseover and apply back onmouseout. But
> > > that generates error that className property is not found, even though
> > > it is there. There are a lot of problems like that when I googled for
> > > "error getting className property".
>
> > Can't help you there as you didn't post any code. But, if all of your
> > cell's have different colors, then perhaps you shouldn't obscure this
> > distinction in your rollover effect.
>
> copy-paste code demonstrates the problem: only last row is
> highllighted...
>
> <html><head>
> <title>Simple example</title>
> <style type="text/css">
> .blue{background-color:lightblue;}
> .red{background-color

range;}
> .yellow{background-color:lightyellow;}
> .tableRowOver{background-color:gold;}
> .tableRrow{}
> </style>
> <script language="JavaScript">
> function start(){
> var d = document.getElementById("myDiv");
> d.innerHTML = "<table width='100%'><tr onmouseover='hilite(this)' "+
> "onmouseout='lolite(this)'><td class='blue'>blue</td>"+
> "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
> "<tr onmouseover='hilite(this)' onmouseout='lolite(this)'>"+
> "<td class='blue'>blue</td>"+
> "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
> "<tr onmouseover='hilite(this)'onmouseout='lolite(this) '><td
> class='blue'>blue</td>"+
> "<td class='red'>red</td><td class='yellow'>yellow</td></tr>"+
> "<tr onmouseover='hilite(this)'onmouseout='lolite(this) '><td>empty</
> td>"+
> "<td>empty</td><td>empty</td></tr></table>";}
>
> function hilite(row){row.className = 'tableRowOver';}
> function lolite(row){row.className = 'tableRow';}
> </script>
> </head>
> <body ONLOAD="start()">
> <div id='myDiv'></div>
> </body>
> </html>- Hide quoted text -
>
> - Show quoted text -

You could change your style block to:

..blue{background-color:lightblue;}
..red{background-color

range;}
..yellow{background-color:lightyellow;}
..tableRowOver td {background-color:gold !important}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Selecting and Highlighting Multiple Rows in a DataGrid	Bob Loveshade	ASP .Net	1	11-19-2005 09:26 AM
Selecting and Highlighting Multiple Rows in a DataGrid	.NETn00b	ASP .Net	0	11-19-2005 04:01 AM
Selecting and Highlighting Multiple Rows in a DataGrid	.NETn00b	ASP .Net Datagrid Control	0	11-19-2005 03:34 AM
script for moving rows up and down and traverse thru rows of HTML table	Subba Rao via DotNetMonster.com	ASP .Net	0	03-19-2005 06:46 AM
Highlighting DataGrid Rows on mouseOver	=?Utf-8?B?V2ViTWF0cml4?=	ASP .Net	4	12-01-2004 08:11 AM