Sure thing!
Good luck with JavaScript!
/Robert
-----Ursprungligt meddelande-----
Fr=E5n: Claudio Pallone [mailto:pallone@l...]
Skickat: den 4 oktober 2002 16:42
Till: JavaScript HowTo
=C4mne: [javascript_howto] Re: SV: Re: SV: Re: SV: Re: SV: CHOOSE THE
RIGHT TD
Hi Robert,
Spot on !! :-)
Many thanks for your help. This has helped me to understand a lot of
things that I did not know before. I really appreciate your time and
help.
Cheers,
Claudio
> Claudio,
assume that the TDs aren't colored to start with.
Then you can create a varibale called bColoredTDs which has the initial
value "false" (which means, no, they aren't colored). Then you just
change the boolean variable according to wat's happening.
Below code will work just fine for you:
var bColoredTDs =3D3D false;
function HighlightIndexTD(){
var arrTables =3D3D document.getElementsByTagName("table");
for(var i=3D3D0; i<arrTables.length; i++){
var arrAllCurrentTableRows =3D3D arrTables
[i].getElementsByTagName("tr");
for(var j=3D3D0; j<arrAllCurrentTableRows.length; j++){
var oAllCells =3D3D arrAllCurrentTableRows
[j].getElementsByTagName("td");
with(oAllCells[oAllCells.length - 1]){
var intValue =3D3D parseInt(innerHTML,
10);
if(!bColoredTDs && (intValue < 80 ||
intValue > 120)){
style.color =3D3D "white";
style.backgroundColor =3D3D
(intValue < 80)? "blue" : "red";
}
else{
style.color =3D3D "black";
style.backgroundColor =3D3D
"white";
}
}
}
}
bColoredTDs =3D3D (bColoredTDs)? false : true;
}
/Robert
-----Ursprungligt meddelande-----
Fr=3DE5n: Claudio Pallone [mailto:pallone@l...]=3D20
Skickat: den 4 oktober 2002 16:04
Till: JavaScript HowTo
=3DC4mne: [javascript_howto] Re: SV: Re: SV: Re: SV: CHOOSE THE RIGHT TD
Thanks Robert, I will have a look at those books.
You are right, I would like to restore all table cells to black text and
white background color but not calling another function. I would like to
be able to click on the same link I have at the top of the page and
toggle=3D20 the restore the color.
You know when you click on a button to show or hide something on the
page?? In this case instead of hiding the TDs it would restore the cells
to black=3D20 text and white background.
I hope you can understand it but let me know if this is not clear.
Cheers,
Claudio
> Hi Claudio,
First, regarding books, there are two that I'd really like to recommend.
I haven't read the latest versions, but the previous ones have been
really good!
JavaScript: The Definitive Guide, 4th Edition
(http://www.oreilly.com/catalog/jscript4/)
Dynamic HTML: The Definitive Reference, 2nd Edition
(http://www.oreilly.com/catalog/dhtmlref2/)
Regarding your problem:
If I understand you correctly, you just want to restore all table cells
to black text and white background color?
In that case, just loop trough all TDs in the last column and restore
them:
function restoreTD(){
var arrTables =3D3D3D document.getElementsByTagName("table");
for(var i=3D3D3D0; i<arrTables.length; i++){
var oRows =3D3D3D arrTables[i].rows;
for(var j=3D3D3D0; j<oRows.length; j++){
var oCells =3D3D3D oRows[j].cells;
with(oCells[oCells.length - 1]){
style.color =3D3D3D "black";
style.backgroundColor =3D3D3D "white";
}
}=3D3D09
}
}
/Robert
-----Ursprungligt meddelande-----
Fr=3D3DE5n: Claudio Pallone [mailto:pallone@l...]=3D3D20
Skickat: den 4 oktober 2002 15:26
Till: JavaScript HowTo
=3D3DC4mne: [javascript_howto] Re: SV: Re: SV: CHOOSE THE RIGHT TD
Hi Robert,
I have already bought a book called The Book of Javascript and
have=3D3D20
started reading. However, I checked it and could not find any example to
achieve what you kindly showed me. Many thanks again :-)
I just have on more question to close this subject. I hope you do not
get=3D3D20 mad with me !!!!!!
As you saw from my example, I am using a link at the top of the page
to=3D3D20 highlight the TDs. However, I would like to toggle the
highlighting so=3D3D20 that one the user first clicks on the link it =3D
change the colour then when=3D3D20 he clicks again it would go back to
how
it was before.
I have tried to put an else after:
if(intValue < 80 || intValue > 120)
{
style.color =3D3D3D "white";
style.backgroundColor =3D3D3D (intValue < 80)? "blue" : "red";
}
else
{
style.color =3D3D3D "black";
style.backgroundColor =3D3D3D "white";
}
but it is not functioning. Please if it is not too much trouble could
you=3D3D20 please let me know what I have to change fot this to work??
Looking forward to your reply
Cheers,
Claudio
The code:
<html>
<head>
<title>TD Highlighting</title>
<script language=3D3D3D"Javascript">
function HighlightIndexTD()
{
var arrTables =3D3D3D document.getElementsByTagName("table");
for(var i=3D3D3D0; i<arrTables.length; i++)
{
if(i > 0)
{
var arrAllCurrentTableRows =3D3D3D arrTables
[i].getElementsByTagName("tr");
for(var j=3D3D3D0;
j<arrAllCurrentTableRows.length;
j++)
{
var oAllCells =3D3D3D
arrAllCurrentTableRows [j].getElementsByTagName("td");
with(oAllCells[oAllCells.length - 1])
{
var intValue =3D3D3D
parseInt(innerHTML,=3D3D20
10);
if(intValue < 80 || intValue >
120)
{
style.color =3D3D3D
"white";
style.backgroundColor =3D3D3D (intValue < 80)? "blue" : "red";
}
else
{
style.color =3D3D3D "black";
style.backgroundColor =3D3D3D "white";
}
}
}
}
}
}
</script>
</head>
<body>
<div top=3D3D3D"1px"><span style=3D3D3D"cursor:hand;
cursor:pointer"=3D3D20
onclick=3D3D3D"HighlightIndexTD();">Highlight</span><br /></div> <div
id=3D3D3D"leftMargin" style=3D3D3D"position:absolute; left:9px; =3D
top:42px;=3D3D20 width:35px; height:999px; z-index:10"> <table
border=3D3D3D"1" id=3D3D3D"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=3D3D3D"Layer1" style=3D3D3D"position:absolute; left:89px; =3D
top:42px;=3D3D20 width:35px; height:999px; z-index:10"> <table
border=3D3D3D"1" id=3D3D3D"Table1"> <tr>
<td>Test</td>
<td>Test</td>
<td>Index</td>
</tr>
<tr>
<td>103</td>
<td>49</td>
<td name=3D3D3D"idx">76</td>
</tr>
<tr>
<td>49</td>
<td>103</td>
<td name=3D3D3D"idx">76</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name=3D3D3D"idx">86</td>
</tr>
</table>
</div>
<div id=3D3D3D"Layer2" style=3D3D3D"position:absolute; left:199px; =3D
top:42px;=3D3D20 width:35px; height:999px; z-index:10"> <table
border=3D3D3D"1" id=3D3D3D"Table2"> <tr>
<td>Test</td>
<td>Test</td>
<td>Index</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name=3D3D3D"idx">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name=3D3D3D"idx">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name=3D3D3D"idx">86</td>
</tr>
</table>
</div>
</body>
</html>
> Well, Claudio, you have to do some reading on your own.
It's basic JavaScript. It's referencing to an object without having to
write the complete path every time.
document.getElementById("someTextBox").value =3D3D3D3D "Some value";
document.getElementById("someTextBox").style.border =3D3D3D3D "1px solid
=3D
=3D3D3D black";
can also be written:
with(document.getElementById("someTextBox")){
value =3D3D3D3D "Some value";
style.border =3D3D3D3D "1px solid black";
}
For more info, see:
http://developer.netscape.com/docs/manuals/js/core/jsref15/stmt.html#100
4910
http://msdn.microsoft.com/library/default.asp?url=3D3D3D3D/library/en-us/
s
c=3D
r
i=3D3D
p
t=3D3D3D
5
6/html/js56jsstmwith.asp
/Robert
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3D3D3Dnosim/theprog
r
a=3D
m
m=3D3D
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3D3D3Dnosim/theprog
r
a=3D
m
m=3D3D
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3D3D3Dnosim/theprog
r
a=3D
m
m=3D3D
e
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or=3D3D20 to
unsubscribe send a blank email to
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3D3Dnosim/theprogra
m
m=3D
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3D3Dnosim/theprogra
m
m=3D
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3D3Dnosim/theprogra
m
m=3D
e
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or=3D20 to
unsubscribe send a blank email to
---
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
