IE 7 not showing dynamic content

IE 7 not showing dynamic content

Hi all,

I am trying to populate a table from an XML file, it works fine in FF3 and Chrome but in IE7 only the table headers show up
Please help!

here is my js file

// File: readXML.js
var Var_RowBGColor = "blue";
// Start function when DOM has completely loaded
$(document).ready(function(){

   // Open the docs.xml file
   $.get("docs.xml",{},function(xml){
         
      // Build an HTML string
      myHTMLOutput = '';
       myHTMLOutput += '<table id=\"mytable\" class=\"innerTable\">';
        myHTMLOutput += '<th class=\"Header\">Type<\/th><th class=\"Header\">Document Name<\/th><th class=\"Header\">Date Posted<\/th><th class=\"Header\">File Size<\/th>';
        
      // Run the function for each document tag in the XML file
      $('document',xml).each(function(i) {
         documentType = $(this).find("type").text();
         documentName = $(this).find("Name").text();
         documentDatePosted = $(this).find("datePosted").text();
         documentFileSize = $(this).find("fileSize").text();
         
         
         // Build row HTML data and store in string
         mydata = BuilddocumentHTML(documentType,documentName,documentDatePosted,documentFileSize);
         myHTMLOutput +=  mydata;
      });
      myHTMLOutput += '<\/table>';
      
      // Update the DIV called Content Area with the HTML string
      //$("#ContentArea").append(myHTMLOutput);
      document.getElementById("ContentArea").innerHTML = myHTMLOutput;
      alternate("mytable");
   });
});



function BuilddocumentHTML(documentType,documentName,documentDatePosted,documentFileSize){
   
   
   // Build HTML string and return
   output = '';
   output += '<tr class=\"even\">';
   output += '<td class=\"type\">'+ "<img src=\"" + documentType + "\" />" +'<\/td>';
   output += '<td>' + "<a href=\"" + "Documents\/" + documentName + "\">" + getName(documentName) + "<\/a>"  +'<\/td>';
   output += '<td>'+ documentDatePosted +'<\/td>';
   output += '<td align=\"right\">'+ documentFileSize +'<\/td>';
   output += '<\/tr>';
   return output;
}

function getName(documentName){
   var tempArray = documentName.split("_");
   var temp = "";
   for (var i = 0; i < tempArray.length; i++){
      temp += tempArray[i];
      temp += " ";
   }
   return temp;
   
}


function alternate(id){
         if(document.getElementsByTagName){ 
            var table = document.getElementById(id);   
            var rows = table.getElementsByTagName("tr");   
            for(i = 0; i < rows.length; i++){           
            //manipulate rows
            rows[i].onmouseover = function(){Var_RowBGColor = this.style.backgroundColor; this.style.backgroundColor='cornsilk';};
            rows[i].onmouseout = function(){this.style.backgroundColor=Var_RowBGColor;};
            if(i % 2 == 0){
               rows[i].className = "even";
            }else{
               rows[i].className = "odd";
               }       
            }
         }
      }
   


And my HTML file

<html>
   <head>
      <TITLE>PDF Documents</TITLE>
      <LINK href="support/document.css" rel="stylesheet">
      <script type="text/javascript" src="support/jquery.js"></script>
      <script type="text/javascript" src="support/readXML.js"></script>
      
   </head>
   <body>
   <h1 CLASS= "heading" >
   &nbsp;SomeTitle
   </h1>

   <!-- OUTER TABLE -->
   <TABLE CLASS="boldtable" Border=0 WIDTH=100% CELLPADDING=0 CELLSPACING=0>
   <TR>
   <TD  width="70%" valign="top">

   <!-- DATA TABLE -->
   
   <div id="ContentArea"></div>
   
   </TD>

   <TD WIDTH="210"><img src="graphics/main_side.gif"></TD>
   </TR>
   </TABLE>
   
   
   </body>
</html>