Color an id's value based on another id's value

**bigalo** · 01-26-2009, 06:26 PM

Hello,

Could someone please help. I want to be able to color the value of an ID based on the value of another value. My script displays a table with a "stock symbol", the "last value", the "change in dollars" and the "change in percentage". The "direction" column will be removed later. I want to make the value of the "change in dollar" and "change in percentage" either red(if "-" direction value) or green(if "+" direction value). I hope this makes sense. Here is the code:

Thanks!

HTML:

Code:

<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Firefox, Mozilla, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("marketWatch.xml");
document.write("<table border='1'>");
document.write("<tr>");
document.write("<td>");
document.write("Symbol");
document.write("</td>");
document.write("<td>");
document.write("Last");
document.write("</td>");
document.write("<td>");
document.write("$Chg");
document.write("</td>");
document.write("<td>");
document.write("%Chg");
document.write("</td>");
document.write("<td>");
document.write("direction");
document.write("</td>");
document.write("</tr>");
var x=xmlDoc.getElementsByTagName("stock");
for (var i=0;i<5;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("change")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("percent")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("direction")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>

XML:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<stocks>
  <stock>
    <symbol>DJIA</symbol>
    <company>DOW JONES</company>
    <value>10,915.37</value>
    <change>109.50</change>
    <percent>1.01</percent>
    <direction>+</direction>
  </stock>
  <stock>
  <symbol>NASDAQ</symbol> 
  <company>NASDAQ</company> 
  <value>1,497.42</value> 
  <change>20.13</change> 
  <percent>1.36</percent> 
  <direction>+</direction> 
  </stock>
<stock>
  <symbol>SP500</symbol> 
  <company>SP500</company> 
  <value>842.52</value> 
  <change>-10.57</change> 
  <percent>-1.27</percent> 
  <direction>-</direction> 
  </stock>
<stock>
  <symbol>BK</symbol> 
  <company>BANK OF NEW YORK</company> 
  <value>24.23</value> 
  <change>0.35</change> 
  <percent>1.48</percent> 
  <direction>+</direction> 
  </stock>
<stock>
  <symbol>FNM</symbol> 
  <company>FANNIE MAE</company> 
  <value>0.65</value> 
  <change>-0.02</change> 
  <percent>-2.99</percent> 
  <direction>-</direction> 
  </stock>
</stocks>

**jscheuer1** · 01-26-2009, 08:12 PM

Code:

<html>
<body>
<style type="text/css">
.rt {text-align: right;}
.ct {text-align: center;}
.rd {color: red;}
.gr {color: green;}
</style>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Firefox, Mozilla, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("marketWatch.xml");
document.write("<table border='1'>");
document.write("<tr>");
document.write("<td>");
document.write("Symbol");
document.write("</td>");
document.write("<td>");
document.write("Last");
document.write("</td>");
document.write("<td>");
document.write("$Chg");
document.write("</td>");
document.write("<td>");
document.write("%Chg");
document.write("</td>");
document.write("<td>");
document.write("direction");
document.write("</td>");
document.write("</tr>");
var x=xmlDoc.getElementsByTagName("stock");
for (var i=0;i<5;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td class='rt'>");
document.write(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td class='rt" +(/^-/.test(x[i].getElementsByTagName("change")[0].childNodes[0].nodeValue)? ' rd' : ' gr') + "'>");
document.write(x[i].getElementsByTagName("change")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td class='rt" +(/^-/.test(x[i].getElementsByTagName("change")[0].childNodes[0].nodeValue)? ' rd' : ' gr') + "'>");
document.write(x[i].getElementsByTagName("percent")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td class='ct'>");
document.write(x[i].getElementsByTagName("direction")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>

**bigalo** · 01-26-2009, 08:39 PM

Thanks John! This is exactly what I was looking for!

Cheer!

Thread: Color an id's value based on another id's value

Thread Tools

Search Thread

Color an id's value based on another id's value

Bookmarks

Bookmarks

Posting Permissions