Pastebin.vip

JavaScript converts XML to HTML table

From , 5 Years ago, written in JavaScript, viewed 149 times.
URL https://pastebin.vip/view/e46709aa
  1. function ConvertToTable(targetNode)
  2. {
  3.     // if the targetNode is xmlNode this line must be removed
  4.     // i couldnt find a way to parse xml string to xml node
  5.     // so i parse xml string to xml document
  6.     targetNode = targetNode.childNodes[0];
  7.  
  8.     // first we need to create headers
  9.     var columnCount = targetNode.childNodes[0].childNodes.length;
  10.     var rowCount = targetNode.childNodes.length
  11.     // name for the table
  12.     var myTable = document.createElement("table");
  13.     myTable.border = 1;
  14.     myTable.borderColor ="green";
  15.     var firstRow = myTable.insertRow();
  16.     var firstCell = firstRow.insertCell();
  17.     firstCell.colSpan = columnCount;
  18.     firstCell.innerHTML = targetNode.nodeName;
  19.     // name for the columns
  20.     var secondRow = myTable.insertRow();
  21.     for(var i=0;i<columnCount;i++)
  22.     {
  23.         var newCell = secondRow.insertCell();
  24.         newCell.innerHTML = targetNode.childNodes[0].childNodes[i].nodeName;
  25.     }
  26.     // now fill the rows with data
  27.     for(var i2=0;i2<rowCount;i2++)
  28.     {
  29.         var newRow = myTable.insertRow();
  30.          for(var j=0;j<columnCount;j++)
  31.          {
  32.             var newCell = newRow.insertCell();
  33.             newCell.innerHTML = targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue;
  34.          }
  35.     }
  36.     // i prefer to send it as string instead of a table object
  37.     return myTable.outerHTML;
  38. }
  39.  
  40.  
  41. // example usage on a web page starts below:
  42.  
  43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  44. <html xmlns="http://www.w3.org/1999/xhtml" >
  45. <head>
  46.     <title>Untitled Page</title>
  47.    
  48. </head>
  49. <body>
  50. <script type="text/javascript">
  51.  
  52. function ConvertToTable(targetNode)
  53. {
  54.     // if the targetNode is xmlNode this line must be removed
  55.     // i couldnt find a way to parse xml string to xml node
  56.     // so i parse xml string to xml document
  57.     targetNode = targetNode.childNodes[0];
  58.  
  59.     // first we need to create headers
  60.     var columnCount = targetNode.childNodes[0].childNodes.length;
  61.     var rowCount = targetNode.childNodes.length
  62.     // name for the table
  63.     var myTable = document.createElement("table");
  64.     myTable.border = 1;
  65.     myTable.borderColor ="green";
  66.     var firstRow = myTable.insertRow();
  67.     var firstCell = firstRow.insertCell();
  68.     firstCell.colSpan = columnCount;
  69.     firstCell.innerHTML = targetNode.nodeName;
  70.     // name for the columns
  71.     var secondRow = myTable.insertRow();
  72.     for(var i=0;i<columnCount;i++)
  73.     {
  74.         var newCell = secondRow.insertCell();
  75.         newCell.innerHTML = targetNode.childNodes[0].childNodes[i].nodeName;
  76.     }
  77.     // now fill the rows with data
  78.     for(var i2=0;i2<rowCount;i2++)
  79.     {
  80.         var newRow = myTable.insertRow();
  81.          for(var j=0;j<columnCount;j++)
  82.          {
  83.             var newCell = newRow.insertCell();
  84.             newCell.innerHTML = targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue;
  85.          }
  86.     }
  87.     // i prefer to send it as string instead of a table object
  88.     return myTable.outerHTML;
  89. }
  90. function loadXmlDocFromString(text)
  91. {
  92.     try //Internet Explorer
  93.       {
  94.       xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  95.       xmlDoc.async="false";
  96.       xmlDoc.loadXML(text);
  97.       return xmlDoc;
  98.       }  
  99.     catch(e)
  100.       {
  101.       try // Firefox, Mozilla, Opera, etc.
  102.         {
  103.         parser=new DOMParser();
  104.         xmlDoc=parser.parseFromString(text,"text/xml");
  105.         return xmlDoc;
  106.         }
  107.       catch(e)
  108.         {
  109.         alert(e.message);
  110.         return;
  111.         }
  112.       }
  113. }
  114. var myXml = '<TableName> \
  115.      <firstRow> \
  116.        <field1>1</field1> \
  117.        <field2>2</field2> \
  118.      </firstRow> \
  119.      <firstRow> \
  120.        <field1>3</field1> \
  121.        <field2>4</field2> \
  122.      </firstRow> \
  123.    </TableName>';
  124.  var myDoc = loadXmlDocFromString(myXml);
  125. document.write( ConvertToTable(myDoc));
  126. </script>
  127. </body>
  128. </html>
  129. //javascript/6185

Reply to "JavaScript converts XML to HTML table"

Here you can reply to the paste above

captcha

https://burned.cc - Burn After Reading Website
Powered by Pastebin.vip paste tool since 2022!