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="Javascript">
function HighlightTD()
{
var i;
var strDebug = "";
var arrTables = document.getElementsByTagName("table");
for(var i=0; i<arrTables.length; i++)
{
if(i > 0)
{
var arrAllTableCells = arrTables
[i].getElementsByTagName("td");
for(var j=0; j<arrAllTableCells.length;
j++)
{
if(j > 2)
{
var oTD = arrAllTableCells[j];
var intValue = parseInt(oTD.innerHTML, 10);
if(intValue < 80 || intValue > 120)
{
oTD.style.color
= "white";
oTD.style.backgroundColor = (intValue < 80)? "blue" : "red";
}
}
}
}
}
}
</script>
</head>
<body>
<div top="1px"><span style="cursor:hand; cursor:pointer"
onclick="HighlightTD();">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>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="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>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>
View Cart
