Hi 

I have gone to great lengths to create a S-Doc file using HTML. The output file requires a cell to change colour based on the value of the object field. so I have created the following which works when i test it on a web browser html screen. The script I run to dynamically change the colour of the cell utlises a src file which does not work when I use it in SFDC.  Here is the partial code that I have put together and I have bolded the areas that I think are causing me problems. Is there a way that I can host the src file in SFDC? Or is there a way that I can run a script that will execute the process whereby the value returned in the one cell changes the background colour of the cell? Many thanks in advance.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script><script type="text/javascript">


$(document).ready(function(){
    $('#table_id td.colour').each(function(){
        if ($(this).text() == 'Medical Green') {
            $(this).css('background-color','#66ffcc');}
        
        else if ($(this).text() == 'Medical Blue') {
            $(this).css('background-color','#0099ff');}
        
        else if ($(this).text() == 'Light Blue') {
            $(this).css('background-color','#99ccff');}
        
        else if ($(this).text() == 'White') {
            $(this).css('background-color','#ffffff');}
        
        else if ($(this).text() == 'Lilac') {
            $(this).css('background-color','#ccccff');}
        
        else if ($(this).text() == 'Cream') {
            $(this).css('background-color','#ffffe6');}
        
        else if ($(this).text() == 'Grey') {
            $(this).css('background-color','#cccccc');
        }
    });
});


</script>
<style media="all" type="text/css">@page {
            size: A4 portrait; 
            margin-top: 1.25in;
            margin-left: 0.5in;
            margin-right: 0.5in;
            margin-bottom: 1.25in;
            border: none;
            padding: 0em;    

         @top-left{
                content: element(header);        
         }
         @bottom-center{
                content: element(footer);
            }
}

        #page-header {
            position: running(header);
            top: 0px;
            left: 0px;
            width: 100%;
            font-family: verdana,geneva,sans-serif;
            padding: 10px;
                padding-bottom: 75px;
            padding-top: 0px;
            display: table;
        }
        
        #page-footer {
            position: running(footer);
            display: block; 
        }



          td.special { border: 2px double; }
</style>
<div id="page-header">
<table style="border-bottom-color:rgb(0, 0, 0);border-bottom-style:solid;border-bottom-width:0pt;color:rgb(169, 169, 169);font-family:verdana,geneva,sans-serif;font-size:36pt;height:9px;vertical-align:bottom;" width="100%">
    <tbody>
        <tr>
            <td style="vertical-align: top; width: 40%; text-align: center;"><span style="font-family:verdana,geneva,sans-serif;"><img alt="" src="/servlet/servlet.ImageServer?id=015240000006wpkAAA&amp;oid=00D24000000diL5EAI" style="width: 267px; height: 82px;" /></span></td>
        </tr>
    </tbody>
</table>
</div>

<div style="text-align: center;"><span style="font-size:20px;"><span style="color:#000000;"><span style="font-family: verdana, geneva, sans-serif; line-height: 20.8px; text-align: right;">WORK ORDER INSTRUCTIONS&nbsp;</span></span></span><br />
<br />
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;"><strong>MANUFACTURE DATE:<br />
{{!Factory_Order_Item__c.factory_start_time__c dd/MM/yyyy}}</strong></span></span><br />
&nbsp;
<table align="center" border="0" cellpadding="8" cellspacing="8" id="table_id" style="height:200px;width:650px;">
    <tbody>
        <tr>
            <td style="text-align: left; width: 300px; vertical-align: middle;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">P/O NUMBER</span></span></td>
            <td class="special" style="text-align: center; vertical-align: middle; width: 350px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;"><strong>{{!Factory_Order_Item__c.Factory_Order__r.Order__r.orderreferencenumber}}</strong></span></span></td>
        </tr>
        <tr>
            <td style="text-align: left; width: 300px; vertical-align: middle;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">CUSTOMER</span></span></td>
            <td class="special" style="text-align: center; vertical-align: middle; width: 350px;"><span style="font-family:arial,helvetica,sans-serif;"><strong><span style="font-size:16px;">{{!Factory_Order_Item__c.customer_name__c}}</span></strong></span></td>
        </tr>
        <tr>
            <td style="text-align: left; width: 300px; vertical-align: middle;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">COLOUR</span></span></td>
            <td class="colour" style="text-align: center; vertical-align: middle; width: 350px;"><span style="font-family:arial,helvetica,sans-serif;"><strong><span style="font-size:16px;">Medical Green</span></strong></span></td>
        </tr>