将表转换为XML,然后使用Javascript / jQuery恢复为XML

时间:2014-08-29 06:47:53

标签: javascript jquery html xml

我需要将硬编码的HTML表转换为XML。我能够将HTML表转换为XML,其编码如下所示。现在,我需要将同一个XML文件转换回同一程序中的HTML表。任何人都可以帮我解决这个问题。感谢

代码是:

<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>

2 个答案:

答案 0 :(得分:0)

此代码可以帮助您

<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

答案 1 :(得分:0)

我现在无法改进,但我已经为你创建了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>