Highlighting Table Data

Forum Moderators: open

Message Too Old, No Replies

Highlighting Table Data

onMouseOver(...)

YorkshireSteve

7:03 pm on Nov 13, 2003 (gmt 0)

Hi,

I need to highligh both columns and rows on my HTML table. Highlighting rows is easy; I'm familiar with the code

<tr bgcolor="#FFFFFF" onMouseOver="this.bgColor='#FFFFCC'" onMouseOut="this.bgColor='#FFFFFF'">

and so on, which is an excellent way of displaying table data. I now want to highlight the table column as well as the row for my dynamic table (PHP/MySQL).

Does anyone have a quick and easy way to do this, keeping in mind that the number of rows will differ based on MySQL results?

My columns are months, and my rows are different departments. I've thought of giving each cell an ID of

$departmentName_$month

, and passing both $departmentName and $month to a function to highlight all cells which are in the column $month, and the row $departmentName. I've managed to add the departments and months into some JavaScript arrays in my code, but that's about it. My JavaScript knowledge is limited, and I can't seem to get any further!

Any help will be much appreciated!

Steve.

macrost

7:44 pm on Nov 14, 2003 (gmt 0)

yorkshire,
This here might help you out.
[webmasterworld.com...]
Mac

DrDoc

7:51 pm on Nov 14, 2003 (gmt 0)

And while we're at bringing CSS up...

You can assign class names to your TDs.

r1 = row 1
r2 = row 2
c1 = col 1
c2 = col 2

etc.

DrDoc

8:16 pm on Nov 14, 2003 (gmt 0)

Then you can do something like this:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function colorize(which) {
if(document.getElementsByTagName) {
classNames = which.className.split(/ /);
cells = document.getElementsByTagName('td').length;
for(i = 0; i<cells; i++) {
hasClassName = document.getElementsByTagName('td')[i].className;
if(hasClassName.indexOf(classNames[0])!=-1 ¦¦ hasClassName.indexOf(classNames[1])!=-1) {
document.getElementsByTagName('td')[i].style.background = "#fed";
}
}
}
}
function decolorize(which) {
if(document.getElementsByTagName) {
classNames = which.className.split(/ /);
cells = document.getElementsByTagName('td').length;
for(i = 0; i<cells; i++) {
hasClassName = document.getElementsByTagName('td')[i].className;
if(hasClassName.indexOf(classNames[0])!=-1 ¦¦ hasClassName.indexOf(classNames[1])!=-1) {
document.getElementsByTagName('td')[i].style.background = "transparent";
}
}
}
}
</script>
</head>
<body>
<table style="border-collapse:collapse;">
<tr>
<td class="c1 r1" onmouseover="colorize(this)" onmouseout="decolorize(this)">Foobar</td>
<td class="c2 r1" onmouseover="colorize(this)" onmouseout="decolorize(this)">Widgets</td>
<td class="c3 r1" onmouseover="colorize(this)" onmouseout="decolorize(this)">Blah</td>
<td class="c4 r1" onmouseover="colorize(this)" onmouseout="decolorize(this)">More</td>
</tr>
<tr>
<td class="c1 r2" onmouseover="colorize(this)" onmouseout="decolorize(this)">Blah</td>
<td class="c2 r2" onmouseover="colorize(this)" onmouseout="decolorize(this)">More</td>
<td class="c3 r2" onmouseover="colorize(this)" onmouseout="decolorize(this)">Foobar</td>
<td class="c4 r2" onmouseover="colorize(this)" onmouseout="decolorize(this)">Widgets</td>
</tr>
<tr>
<td class="c1 r3" onmouseover="colorize(this)" onmouseout="decolorize(this)">Widgets</td>
<td class="c2 r3" onmouseover="colorize(this)" onmouseout="decolorize(this)">Blah</td>
<td class="c3 r3" onmouseover="colorize(this)" onmouseout="decolorize(this)">More</td>
<td class="c4 r3" onmouseover="colorize(this)" onmouseout="decolorize(this)">Foobar</td>
</tr>
<tr>
<td class="c1 r4" onmouseover="colorize(this)" onmouseout="decolorize(this)">Foobar</td>
<td class="c2 r4" onmouseover="colorize(this)" onmouseout="decolorize(this)">Widgets</td>
<td class="c3 r4" onmouseover="colorize(this)" onmouseout="decolorize(this)">Blah</td>
<td class="c4 r4" onmouseover="colorize(this)" onmouseout="decolorize(this)">More</td>
</tr>
</table>
</body>
</html>

YorkshireSteve

10:11 pm on Nov 17, 2003 (gmt 0)

Wow!

Thank you VERY much, DrDoc! This does exactly what I need - and I'm sure it'll help others out too.

Thanks,

Steve.

DrDoc

10:19 pm on Nov 17, 2003 (gmt 0)

Just note that the above is pure DOM, which means it won't work in older IE. Then again, it's not a big deal if an effect like this doesn't work. It's not like you'll get any script errors ;)