www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help With Table Row Color Change, HTML, JavaScript, XML

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Help With Table Row Color Change, HTML, JavaScript, XML

    Hello all. I really need help getting this project done. I am just about finished, but I can't get the color changes to happen according to what is in the "status" field of the .XML file. I know that this will only work in IE and yes, it is for internal use only. Any help would be greatly appreciated.
    HTML code follows. Notice the javascript that is trying to handle the color change which is
    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>ABC Book Store</title>
    <style type="text/css">
    <!--
    .style1 {
    	 font-size: 10pt;
    }
    -->
    </style>
    <script type="text/javascript">
    function fixStatus( )
    {
        var rows = document.getElementsByTagName("tr");
        for ( var r = 0; r < spans.length; ++r )
        {
            var row = rows[r];
            var spans = row.getElementsByTagName("span");
            for ( var s = 0; s < spans.length; ++s )
            {
                var span = spans[s];
                if ( span.datafld != null && span.datafld == "status" )
                {
                    var val = span.innerHTML.toUpperCase();
    		switch ( val )
                    {
                        case 'IS': 
                            row.style.color = "blue"; 
                            break;
                        case 'OO':
                            row.style.color = "pink";
                            break;
                        case 'OS':
                            row.style.color = "orange";
                            break;
    		    case 'PO':
                            row.style.color = "green";
                            break;
                        default:
                            row.style.color = "white"; // ?? unknown status ??
                            break;
                    } // end of switch
                    break; // out of for loop on spans
                } // end of if-status-span found
            } // end of spans loop
        } // end of rows loop
    }
    window.onload = fixStatus;
    </script>
    </head>
    <script>
    function ld_fiction()
    {
    var doc=nb_fiction.XMLDocument;
    doc.load("fiction.xml");
    document.getElementById("head_id").innerHTML="Fiction "; 
     
    }
    function Id_nfiction()
    {
    var doc_s=nb_nfiction.XMLDocument;
    doc_s.load("nfiction.xml");
    document.getElementByID("head_id_d").innerHTML="NonFiction";
    }
    
    function ID_selfhelp()
    {
    var doc_t=nb_selfhelp.XMLDocument;
    doc_t.load("selfhelp.xml");
    document.getElementByID("head_id_e").innerHTML="SelfHelp";
    }
    
    function ID_reference()
    {
    var doc_u=nb_ref.XMLDocument;
    doc_u.load("ref.xml");
    document.getElementByID("head_id_f").innerHTML="Reference";
    }
    
    function ID_mags()
    {
    var doc_v=nb_mags.XMLDocument;
    doc_v.load("mags.xml");
    document.getElementByID("head_id_g").innerHTML="Mags";
    }
    
    
    
    
    </script>
    
    <XML id="nb_fiction" src="fiction.xml"></XML>
    <XML id="nb_nfiction" src="nfiction.xml"></XML>
    <XML id="nb_selfhelp" src="selfhelp.xml"></XML>
    <XML id="nb_ref" src="ref.xml"></XML>
    <XML id="nb_mags" src="mags.xml"></XML>
    
    
    
    <object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
    width="0" height="0"></object>
    
    <object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
    width="0" height="0"></object>
    
    <object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
    width="0" height="0"></object>
    
    <object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
    width="0" height="0"></object>
    
    <object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
    width="0" height="0"></object>
    
    <body>
    <table width="30%" border="0" align="left" cellspacing="1" font size="10">
    
    
    <tr bgcolor="#CCCCCC">
    <td colspan="2">
    <table id="FICTIONTABLE" table width="100%"  datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
    <caption>
    <span>Fiction        </span>
    </caption>
    <thead>
    <tr>
    <th span class="style1">Stock No.</th></span>
    <th span class="style1">Title</th></span>
    <th span class="style1">Author</th></span>
    <th span class="style1">Status</th></span>
    <th span class="style1">Price</th></span>
    <th span class="style1">Publisher</th></span>
    <th span class="style1">Year of Release</th></span>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><span class="style1" datafld="stock"></td></span>
    <td><span class="style1" datafld="title"></td></span>
    <td><span class="style1" datafld="author"></td></td></span>
    <td><span class="style1" datafld="status"></td></span>
    <td><span class="style1" datafld="price"></td></span>
    <td><span class="style1" datafld="publisher"></td></span>
    <td><span class="style1" datafld="year"></td></span>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </body>
    </html>
    I only included the first part of the html code along with the first table, but there is a table for each xml file that it pulls in to make a XML island.
    And, I'm sure that you can tell how the XML file is built from the table.
    The tables display beautifully with no problems, but for example, if I have a "IS" in the status spot, which means, "In-Stock", I want the row to be blue. I don't think I'm very far off, but I need an expert to point me in the right direction. Thanks so much in advanced.

  2. #2
    Join Date
    Apr 2012
    Posts
    3
    Come on......I know someone knows how to get this right.
    I think it's really close. Any help would be much appreciated.

  3. #3
    Join Date
    Mar 2012
    Posts
    41
    have you tested the switch? Have you tried hex values for color?

  4. #4
    Join Date
    Apr 2012
    Posts
    3
    Yes and Yes. When I drag the page into a browser, the tables come up with the XML data, but there is no colors associated with the status and what is in the table.
    I have tried the hex colors also with no luck.

  5. #5
    Join Date
    Apr 2012
    Posts
    34
    It looks like you may have just forgotten to add in the ID tags in the span classes to let the JavaScript know which rows need to be which colors.

    HTML Code:
    <td><span class="style1" id="IS" datafld="stock"></td></span>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles