Hi Robert,
I have already bought a book called The Book of Javascript and have
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
mad with me !!!!!!
As you saw from my example, I am using a link at the top of the page to
highlight the TDs. However, I would like to toggle the highlighting so
that one the user first clicks on the link it change the colour then when
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 = "white";
style.backgroundColor = (intValue < 80)? "blue" : "red";
}
else
{
style.color = "black";
style.backgroundColor = "white";
}
but it is not functioning. Please if it is not too much trouble could you
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="Javascript">
function HighlightIndexTD()
{
var arrTables = document.getElementsByTagName("table");
for(var i=0; i<arrTables.length; i++)
{
if(i > 0)
{
var arrAllCurrentTableRows = arrTables
[i].getElementsByTagName("tr");
for(var j=0; j<arrAllCurrentTableRows.length; j++)
{
var oAllCells = arrAllCurrentTableRows
[j].getElementsByTagName("td");
with(oAllCells[oAllCells.length - 1])
{
var intValue = parseInt(innerHTML,
10);
if(intValue < 80 || intValue > 120)
{
style.color = "white";
style.backgroundColor = (intValue < 80)? "blue" : "red";
}
else
{
style.color = "black";
style.backgroundColor = "white";
}
}
}
}
}
}
</script>
</head>
<body>
<div top="1px"><span style="cursor:hand; cursor:pointer"
onclick="HighlightIndexTD();">Highlight</span><br /></div>
<div id="leftMargin" style="position:absolute; left:9px; top:42px;
width:35px; height:999px; z-index:10">
<table border="1" id="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="Layer1" style="position:absolute; left:89px; top:42px;
width:35px; height:999px; z-index:10">
<table border="1" id="Table1">
<tr>
<td>Test</td>
<td>Test</td>
<td>Index</td>
</tr>
<tr>
<td>103</td>
<td>49</td>
<td name="idx">76</td>
</tr>
<tr>
<td>49</td>
<td>103</td>
<td name="idx">76</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="idx">86</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:199px; top:42px;
width:35px; height:999px; z-index:10">
<table border="1" id="Table2">
<tr>
<td>Test</td>
<td>Test</td>
<td>Index</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name="idx">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name="idx">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="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 =3D "Some value";
document.getElementById("someTextBox").style.border =3D "1px solid =
black";
can also be written:
with(document.getElementById("someTextBox")){
value =3D "Some value";
style.border =3D "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=3D/library/en-us/script=
5
6/html/js56jsstmwith.asp
/Robert
View Cart
