Highlight Table Cells script failing W3C validation due to multiple identical ID's

[esteban]

Script: Highlight Table Cells
http://www.dynamicdrive.com/dynamici...lighttable.htm

Hi folks . This script works wonderfully in IE/FF/Opera (mac/windows) ... but it fails W3C validation since it relies on multiple ID="ignore" statements to flag the table rows/cells that you don't want the highlighting effect applied to.

* TEST PAGE 1: Highlight Table Cells (original DD script)
* W3C Validation Results for TEST 1

Basically, I am trying to determine:

1. if there is a way to modify the existing script so that it becomes standards-compliant, or...
2. if there is a standards-compliant script that highlights rows in tables (I have searched this site, but perhaps I missed a similar script?)

Thanks in advance!


-----------------------------------------
Additional info -- I don't know if it will be useful or not
-----------------------------------------------------
On another forum, a kind, kind soul suggested that the original DD script could be modified as follows:

Step 1: Change all of the ID="ignore" statements in your tables to name="ignore".
Step 2: Update the JS so that instead of looking at ID values it looks at name values, so "source.id" has been replaced with "source.getAttribute("name")")

* TEST PAGE REVISION A: getAttribute("name") . This worked wonderfully across browsers and platforms, but unfortunately, it too failed to validate...
* Validation results for REVISION A

------
Then I, completely ignorant of JS and DHTML, said to myself, "Well, if 'name' doesn't work, why don't I try using 'class' instead of 'name' ?" So, I simply replaced "NAME" with "CLASS", and...

* TEST PAGE REVISION B: I used "CLASS" instead of "NAME".
* REVISION B: Yay! It passed W3C validation.

REVISION B appears to work fine in FF/Opera (mac/windows)...

...but unfortunately, it doesn't fully work in IE. With REVISION B, IE doesn't acknowledge the "IGNORE" flags and, as a result, it highlights (and restores) every row in every table.

Sorry for the long post!

[Twey]

<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.name!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.name=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.name=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>

This will use name instead of ID. Multiple identical name attributes are permissable.

[jscheuer1]

This will use name instead of ID. Multiple identical name attributes are permissable.

For table cells and/or rows? Wouldn't class be a better choice?

[esteban]

This will use name instead of ID. Multiple identical name attributes are permissable.

Thank you for the swift response . I applied your new code to a test page:

* REVISION C: source.name="ignore" (Twey)
* Validation results for REVISION C

Unfortunately, the highlighting effect of your script fails to work properly, essentially having the same problems as my REVISION B (see prior post).

REVISION A (see prior post), which also uses the name attribute, works properly across platforms and across browsers (it uses getAtrribute instead of source.name).

-----------
As far as W3C validation is concerned, I am beginning to think that there might not be an elegant solution: Basically, all of these revised scripts are failing validation because "NAME is not a supported attribute" in tables/row/cells(?) in my doctype (HTML 4.01 Transitional)? That is my understanding, anyway .

Now, I am clueless, but it seems that our attempts to flag rows/cells (name="ignore") is what W3C doesn't like.

I love the effect of this script, though, and I am going to use it, dammit!

[Twey]

Yes, but the OP might have other classes in place, and, as we know, some browsers don't handle multiple classes well. I left it as name because hardly anyone names table cells, so there usually shouldn't be a conflict.

[esteban]

Twey, thanks for explaining the "multiple classes" issue to me... it seems that IE doesn't like multiple classes (as I tried to do in REVISION B, see initial post). Unless, of course, I made an obvious error in the script.

[Twey]

Try .className instead of .getAttribute("class").

[esteban]

Try .className instead of .getAttribute("class").

Yes, I will try this... can you help me with the syntax?

Building off of REVISION B, do I simply replace .getAttribute with .className, as I did here:

(ns6&&(contains_ns6(source, e.relatedTarget)||source.className=="ignore"))

on Test Page REVISION D: className

Note: "NAME=ignore" is used in the table rows on this page.

Sorry if I butchered the code .

[jscheuer1]

Works xbrowser and validates:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Class Based Highlight Table Cells Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TR"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.className!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.className=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.className=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>
</head>
<body>
<table onmouseover="changeto(event, 'lightgreen')" onmouseout="changeback(event, 'white')">
<tr class="ignore">
<td colspan="2">Main Menu</td>
</tr><tr>
<td>Eggs</td>
<td>Ham</td>
</tr><tr class="ignore">
<td>Bread</td>
<td>Circuses</td>
</tr><tr>
<td>Blood</td>
<td>Roses</td>
</tr>
</table>
</body>
</html>

[esteban]

A huge THANK YOU to both of you for your help. I implemented your most recent suggestions.

Unfortunately, the .className revision (test page revision D) is not acknowledging the "ignore" flags. As a result, every row on every table is highlighted on mouseover, and then restored to a light blue on mouseout.

Even more odd, my original REVISION B (getAttribute - class, see my first post) only had problems in IE (win/mac).

REVISION D (className), in contrast, is having problems with most browsers. In the tables on my pages, the top row is "dark blue", followed by a second row that is "medium blue", followed by the rest of the table ("light blue"). In Revision D: On mouseover, every row is highlighted. On mouseout, "light blue" is restored to the row, thus destroying the original format of the tables.

This is a tough nut to crack!