Hi Robert and thanks again for you great help.
I am really impressed.
I have a couple of question about the syntax and logic you used:
1 - I do not understand this code. Could you please explain to me what it
does? especially the With :-)
with(oCells[oCells.length - 1])
2 - I have noticed that you did not use the oCells.innerHTML. In your
previous example you used oTD.innerHTML. Why dont you need to use the
oCells and instead write the innerHTML directly to the intValue???
{
var intValue = parseInt(innerHTML, 10);
Cheers,
Claudio
> Claudio,
good idea starting a new thread! :-)
Given the fact that you just want to check the last column in every
table, I'll give you two different solutions.
One solution uses the "rows" and "cells" arrays that all tables has
(very neat, actually),
and the other solution is more similar to the original one:
SOLUTION 1 (with the "rows" and "cells" arrays):
var arrTables =3D document.getElementsByTagName("table");
for(var i=3D0; i<arrTables.length; i++){
var oRows =3D arrTables[i].rows;
for(var j=3D0; j<oRows.length; j++){
var oCells =3D oRows[j].cells;
with(oCells[oCells.length - 1]){
var intValue =3D parseInt(innerHTML, 10);
if(intValue < 50 || intValue > 100){
style.color =3D "white";
style.backgroundColor =3D (intValue < 50)?
"blue" : "red";
}
}=09
}
}
SOLUTION 2:
var arrTables =3D document.getElementsByTagName("table");
for(var i=3D0; i<arrTables.length; i++){
var arrAllCurrentTableRows =3D
arrTables[i].getElementsByTagName("tr");
for(var j=3D0; j<arrAllCurrentTableRows.length; j++){
var oAllCells =3D
arrAllCurrentTableRows[j].getElementsByTagName("td");
with(oAllCells[oAllCells.length - 1]){
var intValue =3D parseInt(innerHTML, 10);
if(intValue < 50 || intValue > 100){
style.color =3D "white";
style.backgroundColor =3D (intValue < 50)?
"blue" : "red";
}
}=09
}
}
/Robert
-----Ursprungligt meddelande-----
Fr=E5n: Claudio Pallone [mailto:pallone@l...]=20
Skickat: den 3 oktober 2002 23:52
Till: JavaScript HowTo
=C4mne: [javascript_howto] CHOOSE THE RIGHT TD
Robert,
The other thread was getting so big that I decided to star a new one.
I am trying to change the code slightly but I am having some problems.
Please could you check what I am doing wrong?
I have changed the arrTables so that it does not include the first table
which is my total table and this is working fine - if(i > 0)
Now, I have to change the background and forcolor of only the last
Column(
TDs) in each table.
1 - In my sample code below I have to select only the last
columns(Index) of each table.
I have tried to use if(j > 2) since the array start from 0 but this did
not do the trick
If you run the code below you will see what I mean since all TDs that
follow the criteria are being selected.
Cheers,
Claudio
<html>
<head>
<title>TD Highlighting</title>
<script language=3D"Javascript">
function HighlightTD()
{
var i;
var strDebug =3D "";
var arrTables =3D document.getElementsByTagName("table");
for(var i=3D0; i<arrTables.length; i++)
{
if(i > 0)
{
var arrAllTableCells =3D arrTables
[i].getElementsByTagName("td");
for(var j=3D0; j<arrAllTableCells.length;
j++)
{
if(j > 2)
{
var oTD =3D arrAllTableCells[j];
var intValue =3D parseInt(oTD.innerHTML, 10);
if(intValue < 80 || intValue >
120)
{
oTD.style.color
=3D "white";
oTD.style.backgroundColor =3D (intValue < 80)? "blue" : "red";
}
}
}
}
}
}
</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>76</td>
</tr>
<tr>
<td>49</td>
<td>103</td>
<td>76</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td>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>103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td>121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td>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
---
Change your mail options at http://p2p.wrox.com/manager.asp or=20
to unsubscribe send a blank email to
View Cart
