將錶轉換爲XML，然後使用Javascript/jQuery恢復爲XML

我需要將硬編碼的HTML錶轉換爲XML。我能夠將HTML表格轉換爲XML，其編碼如下所示。現在，我需要在相同的程序中將相同的XML文件轉換回HTML表格。任何人都可以請幫我解決這個問題。由於將錶轉換爲XML，然後使用Javascript/jQuery恢復爲XML

代碼是：

<body> 
<!--Table begins--> 
<table id="tb" border="1px" cellpadding="5px" cellspacing="5px"> 
<tr> 
    <th>Name</th> 
    <th>Company</th> 
    <th>Country</th> 
    <th>First Name</th> 
    <th>Last Name</th> 
</tr> 

<tr> 
    <td>ABC</td> 
    <td>DEF</td> 
    <td>GHI</td> 
    <td>JKL</td> 
    <td>MNO</td> 
</tr> 

<tr> 
    <td>PQR</td> 
    <td>STU</td> 
    <td>VWX</td> 
    <td>AGC</td> 
    <td>FSW</td> 

</tr> 
</table> 
<!--Table ends here--> 

    <script> 
    $(function(){ 
    var xml = ""; 
     xml+= '<?xml version= "1.0" encoding="UTF-8"?>'; 
     xml+= '<root>'; 

     $('tr:not(:first)').each(function(j, tr) 
     { 
     $tr = $(tr); 
    xml += '<comp>'; 

    var index1 = $.trim($tr.find('td:first').text()); 
    xml += '<name>'+index1+''; 
    xml += '</name>'; 

    var index2 = $.trim($tr.find('td:nth-child(2)').text()); 
    xml += '<company>'+index2+''; 
    xml += '</company>'; 

      var index3 = $.trim($tr.find('td:nth-child(3)').text()); 
    xml += '<country>'+index3+''; 
    xml += '</country>'; 

    var index4 = $.trim($tr.find('td:nth-child(4)').text()); 
    xml += '<fname>'+index4+''; 
    xml += '</fname>'; 

    var index5 = $.trim($tr.find('td:last').text()); 
    xml += '<lname>'+index5+''; 
    xml += '</lname>'; 

    xml += '</comp>'; 
}); 
xml+= '</root>'; 

console.log(xml); 
}); 
</script> 
</body>

來源

2014-08-29 royalstryker

您可以使用帶有XML文件並根據特定模板顯示的XSLT。即：您需要的表格模板。 – mrida 2014-08-29 06:51:07

檢查以下快速教程：http://www.w3schools.com/xsl/default.asp – mrida 2014-08-29 07:19:17

感謝mrida ......你可以發佈該PLZ的代碼。我是XSLT新手。 – royalstryker 2014-08-29 07:20:47

此代碼可以幫助你

<html> 
<head> 
<title ></title> 
<script type ="text/javascript"> 
function loadXMLDoc(filename) { 
    if (window.ActiveXObject) { 
     xhttp = new ActiveXObject("Msxml2.XMLHTTP"); 

    } 
    else { 
     xhttp = new XMLHttpRequest(); 
    } 
    xhttp.open("GET", filename, false); 
    try { xhttp.responseType = "msxml-document" } catch (err) { } // Helping IE11 
    xhttp.send(""); 
    return xhttp.responseXML; 
} 

function displayResult() { 

    xml = loadXMLDoc("youXMLfile name"); 

    xsl = loadXMLDoc("yourXSLfilename"); 


    // code for IE 
    if (window.ActiveXObject || xhttp.responseType == "msxml-document") { 
     ex = xml1.transformNode(xsl); 
     document.getElementById("example").innerHTML = ex; 
    } 
     // code for Chrome, Firefox, Opera, etc. 
    else if (document.implementation && document.implementation.createDocument) { 
     xsltProcessor = new XSLTProcessor(); 
     xsltProcessor.importStylesheet(xsl); 
     resultDocument = xsltProcessor.transformToFragment(xml1, document);   
     document.getElementById("example").appendChild(resultDocument); 
    } 
} 
</script> 
</head> 
<body onload="displayResult()"> 
<div id="example" /> 
</body> 
</html>

你可以參考這個代碼on this link

來源

2014-08-29 07:23:48 Prasanna

Prasanna-如果可能的話，你可以通過在jsfiddle中集成我的代碼來爲我提供一個工作解決方案。謝謝 – royalstryker 2014-08-29 07:28:27

我已經在提供的鏈接上看到過這段代碼。我是XSLT新手，所以任何幫助都會很棒。 – royalstryker 2014-08-29 07:30:56

如何從xml命名的字符串變量中選擇數據？ – royalstryker 2014-08-29 11:26:43

我不能去，現在去撥弄，但我有爲你創建xsl檢查了這一點。

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
<xsl:template match="/"> 
<html> 
    <body> 

    <table border="1"> 
     <tr bgcolor="#9acd32"> 
     <th style="text-align:left">Name</th> 
     <th style="text-align:left">Company</th> 
     <th style="text-align:center">Country</th> 
     <th style="text-align:center">First Name</th> 
     <th style="text-align:center">Last Name</th> 
     </tr> 
     <xsl:for-each select="Root/comp"> 
     <tr> 
      <td> 
      <xsl:value-of select="Name"/> 
      </td> 
      <td> 
      <xsl:value-of select="Company"/> 
      </td> 
      <td> 
      <xsl:value-of select="Country"/> 
      </td> 
      <td> 
      <xsl:value-of select ="FirstName"/> 
      </td> 
      <td> 
      <xsl:value-of select ="LastName"/> 
      </td> 
     </tr> 
     </xsl:for-each> 
    </table> 
    </body> 
</html> 
</xsl:template> 
</xsl:stylesheet>

來源

2014-08-29 07:48:34 Prasanna

它沒有填充表。它只顯示列標題。我應該如何填充表格中的內容。我的整個XML是字符串格式，我需要將其轉換回HTML格式。 – royalstryker 2014-08-29 09:51:17

@ranger它只是xsl文件，我們在其中定義了結果應該如何看起來像請使用我的第一個答案作爲html代碼，並在'（「yourXSLfilename」）'作爲我已經爲其創建的xsl文件的文件名你 – Prasanna 2014-08-29 10:36:24

請參閱我的代碼的最後5行中的「console.log（xml）」語句。現在在這個變量中，我有整個字符串格式的xml文件。我想從這個xml命名變量生成一個HTML表格。 – royalstryker 2014-08-29 10:40:43

將錶轉換爲XML，然後使用Javascript/jQuery恢復爲XML

回答

相關問題