Welcome to WebmasterWorld Guest from 3.228.24.192

Forum Moderators: open

Message Too Old, No Replies

Highlighting Table Data

onMouseOver(...)

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

New User

10+ Year Member

joined:July 27, 2003
posts:37
votes: 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.

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

Preferred Member

10+ Year Member

joined:Feb 27, 2003
posts:637
votes: 1


yorkshire,
This here might help you out.
[webmasterworld.com...]
Mac
7:51 pm on Nov 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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.

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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>

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

New User

10+ Year Member

joined:July 27, 2003
posts:37
votes: 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.

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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 ;)