Highlighting Rows

V

vunet.us

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
 
D

David Mark

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".
Click to expand...

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.
 
B

Blue Streak

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
Click to expand...

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>
 
V

vunet.us

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.
Click to expand...

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:eek: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>
 
D

David Mark

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:eek: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 -
Click to expand...

You could change your style block to:

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Creating Table with Javascript abd Adding Events dynamically to each 0
highlighting text within a specific cell 1
Iterate through table rows 5
styling in a gridview 1
Performance problem with onMouseover in Internet Explorer 2
Setting cell borders in javascript via css class, FireFox renders weird. 0
Javascript / FireFox help needed 9
Using DOM to change styles instead of IDs... 14

Members online

Total: 51 (members: 1, guests: 50)
Robots: 346

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top