Hi Claudio,
nice thinking! Your code will work with Netscape 6 and up, but not with
IE.
Why? The reason is that Microsoft (don't ask me why) seem to demand that
for TDs (not INPUTs)
the element in question must have both the NAME and ID attribute with
the same value.
For example, this will work for you:
<tr>
<td id=3D"ind" name=3D"ind"></td>
<td id=3D"ind" name=3D"ind"></td>
</tr>
The downside of this is (since an ID is supposed to be unique to an
element), when you use
document.getElementById("ind") in that case, all you will get reference
to is the first element
in the page that has the "ind" ID.
For more info about Microsoft's implementation, see:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getele
mentsbyname.asp
Does anyone know why it is like this? Is it meant to be like this, or is
it a bug in the Microsoft implementation?
/Robert
-----Ursprungligt meddelande-----
Fr=E5n: Claudio Pallone [mailto:pallone@l...]
Skickat: den 5 oktober 2002 21:33
Till: JavaScript HowTo
=C4mne: [javascript_howto] REVISITED TD HIGHLIGHTING
Hi,
First of all I would like to thank Robert and Gautam for helping me
learn how to highlight the TDs in a table depending on a criteria :-)
Secondly, for the completeness of the subject I would like to share
something I have read on my book of Javascript. It says that if we give
the same name to objects on a page we have an array. So I thought that
if I gave the same name to all the TDs I need to change on my html page
that I could create a collection (array) of all the TDs with the same
name.
However, for my disappointment this did not work and I am now confused.
Is it possible or not to create an array of objects on a page which have
the same name??
This is what I did:
1 - I gave the same name attribute to all the TDs I wanted to change the
background and forcolor
<tr>
<td>103</td>
<td>49</td>
<td name=3D"ind">76</td>
</tr>
2 - I then tried to use this code to create an array:
var oCollectionTD =3D document.getElementsByName("ind");
for(i=3D0;i<oCollectionTD.length;i++)
.......
3 - This did not work but I received no errors on running it on IE6.
Wouldnt it be much easier if we could do that? Then we could create
different collections of TDs using the
document.getElementsByName("nameAttribute");
to create an array
Could someone please clarify this to me?
This is the modified version of the code provided by Robert:
<html>
<head>
<title>TD Highlighting</title>
<script language=3D"Javascript">
var bColoredTDs =3D false;
function HighlightTD()
{
var oCollectionTD =3D document.getElementsByName("ind");
for(i=3D0;i<oCollectionTD.length;i++)
{
with(oCollectionTD[i])
{
var intValue =3D parseInt(innerHTML, 10);
if(!bColoredTDs && (intValue < 80 || intValue > 120))
{
style.color =3D "white";
style.backgroundColor =3D (intValue < 80)? "blue" : "red";
}
else
{
style.color =3D "black";
style.backgroundColor =3D "white";
}
}
}
bColoredTDs =3D (bColoredTDs)? false : true;
}
</script>
</head>
<body>
<div top=3D"1px"><span style=3D"cursor:hand; cursor:pointer"
onclick=3D"HighlightTD();">Highlight</span><br /></div> <div
id=3D"leftMargin" style=3D"position:absolute; left:9px; top:42px;
width:35px; height:999px; z-index:10"> <table border=3D"1"
id=3D"Table0">
<tr> <td>Total</td> </tr> <tr>
<td>54534</td>
</tr>
<tr>
<td>3453</td>
</tr>
<tr>
<td>3453</td>
</tr>
</table>
</div>
<div id=3D"Layer1" style=3D"position:absolute; left:89px; top:42px;
width:35px; height:999px; z-index:10">
<table border=3D"1" id=3D"Table1">
<tr>
<td>Test</td>
<td>Test</td>
<td>Index</td>
</tr>
<tr>
<td>103</td>
<td>49</td>
<td name=3D"ind">76</td>
</tr>
<tr>
<td>49</td>
<td>103</td>
<td name=3D"ind">76</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name=3D"ind">86</td>
</tr>
</table>
</div>
<div id=3D"Layer2" style=3D"position:absolute; left:199px; top:42px;
width:35px; height:999px; z-index:10"> <table border=3D"1"
id=3D"Table2">
<tr> <td>Test</td> <td>Test</td> <td>Index</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name=3D"ind">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name=3D"ind">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name=3D"ind">86</td>
</tr>
</table>
</div>
</body>
</html>
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm
e
r-20
View Cart
