Change HTML text color, reading color from XML data

I've an HTML table which uses an XML island as a data source. It displays fine.  One of the XML elements (called TYPE) contains an RGB color value.  I'd like make the text color for each entry the same as the TYPE color value.  Any ideas?  Thanks.
**** HTML ****
 
<table datasrc="#xmlSOEBase" width="100%" border=0 cellSpacing=0 language=vbscript>
	<tr>
		<td>
			<div><Label datafld="DISPLAY"></Label></div>
		</td>
	</tr>
</table>
 
<xml id="xmlSOEBase"></xml>
 
**** XML ****
<ROOT>
	<BASE>
		<DISPLAY>First entry</DISPLAY>
		<TYPE>762452</TYPE>
	<BASE>
	<BASE>
		<DISPLAY>Second entry</DISPLAY>
		<TYPE>345872</TYPE>
	<BASE>
</ROOT>

Open in new window

LVL 7
sj_hicksAsked:
Who is Participating?
 
Geert BormansConnect With a Mentor Information ArchitectCommented:
Here is a basic HTML file,
It has a function that transforms the XML into an HTML table
and overwrites the innerHTML of a div with the transformation result onLoad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Transform</title>
    <script language="javascript">
      function transF()
      {
         var oXML = new ActiveXObject("Msxml2.DOMDocument");
         var oXSL = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
         var oTmpl= new ActiveXObject("Msxml2.XSLTemplate");
         var oProc ;
 
	       oXML.async = false;
         oXML.resolveExternals = false;
	       oXML.load("SOEB.xml"); 
	       
         oXSL.async = false;
         oXSL.resolveExternals = false;
         oXSL.load("SOEB.xsl");
 
         oTmpl.stylesheet = oXSL;
 
         oProc = oTmpl.createProcessor();
         oProc.input = oXML;
				 oProc.transform();
         var resHTM = oProc.output;
         document.getElementById("xmlSOEBase").innerHTML = resHTM;
      }
    </script>
</head>
 
<body onload="transF();">
<div id="xmlSOEBase"></div>
</body>
</html>

Open in new window

0
 
Geert BormansInformation ArchitectCommented:
Data Islands are a very old, Internet Explorer only technique.
It is very unflexible, and you can only map elements to data cells.
You would need a mapping from elements to a class or background colour attribute,
which you can't simply using data islands.

Have you considered XSLT?
It is easy and straightforward, performs a lot better and is a lot more flexible.
Just a little JavaScript and an little XSLT stylesheet and you are done.
Let me know if that is acceptable for you
0
 
sj_hicksAuthor Commented:
Hi Gertone, thanks for the info.  I'm not too worried about it being IE only, as the HTML being run as an HTA (HTML Application).  I'm including this table as part of a larger HTML document.  I've used basic XSLT before to make an XML file display nicely when you open the XML in a browser.  I looked into using XSLT for this scenario, but I'm not sure how make it work within an existing HTML document (if possible).  Are you able to give me any pointers, samples, links etc?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Geert BormansInformation ArchitectCommented:
I named your xml document "SOEB.xml" and I named the XSLT "SOEB.xsl"
as you can see in the script
Here is the XSLT
Works fine at my desk
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/">
        <table border="1">
            <tr>
                <th>
                    <xsl:text>DISPLAY</xsl:text>
                </th>
            </tr>
            <xsl:apply-templates/>
        </table>
    </xsl:template>
    <xsl:template match="BASE">
        <tr bgcolor="{TYPE}">
            <td>
                <xsl:value-of select="DISPLAY"/>
            </td>
        </tr>
    </xsl:template>
 
</xsl:stylesheet>

Open in new window

0
 
sj_hicksAuthor Commented:
Thanks for the info.  It doesn't quite fit into the HTA structure I'm using (my fault, not yours) - the current setup is quite large and detailed and it would take a quite a bit of rework to implement this functionality using the info you've provided, so I'll give it a miss for now.  However, thanks for your assistance - I've learnt some things I may be able to use in the future.
0
 
Geert BormansInformation ArchitectCommented:
welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.