Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Highlighting Rows (http://www.velocityreviews.com/forums/t932073-highlighting-rows.html)

vunet.us@gmail.com 07-16-2007 06:43 PM

Highlighting Rows
 
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


David Mark 07-16-2007 07:20 PM

Re: Highlighting Rows
 
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.


Blue Streak 07-16-2007 09:02 PM

Re: Highlighting Rows
 
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>


vunet.us@gmail.com 07-16-2007 09:13 PM

Re: Highlighting Rows
 
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:orange;}
..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>


David Mark 07-16-2007 09:25 PM

Re: Highlighting Rows
 
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:orange;}
> .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:orange;}
..yellow{background-color:lightyellow;}
..tableRowOver td {background-color:gold !important}



All times are GMT. The time now is 03:37 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.