Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Highlighting Rows

Reply
Thread Tools

Highlighting Rows

 
 
vunet.us@gmail.com
Guest
Posts: n/a
 
      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

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 2:43 pm, (E-Mail Removed) 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.

 
Reply With Quote
 
 
 
 
Blue Streak
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 2:43 pm, (E-Mail Removed) 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>

 
Reply With Quote
 
vunet.us@gmail.com
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 3:20 pm, David Mark <(E-Mail Removed)> wrote:
> On Jul 16, 2:43 pm, (E-Mail Removed) 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-colorrange;}
..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>

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 5:13 pm, (E-Mail Removed) wrote:
> On Jul 16, 3:20 pm, David Mark <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jul 16, 2:43 pm, (E-Mail Removed) 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-colorrange;}
> .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-colorrange;}
..yellow{background-color:lightyellow;}
..tableRowOver td {background-color:gold !important}

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments