1

我正在尝试使用 XSL 转换将转换后的 XML 数据放入 HTML 页面。这是我的 XML：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="w3.xsl"?>
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <company>Columbia</company>
        <price>10.90</price>
        <year>1985</year>
    </cd>
    <cd>
        <title>Hide your heart</title>
        <artist>Bonnie Tyler</artist>
        <country>UK</country>
        <company>CBS Records</company>
        <price>9.90</price>
        <year>1988</year>
    </cd>
    <cd>
        <title>Greatest Hits</title>
        <artist>Dolly Parton</artist>
        <country>USA</country>
        <company>RCA</company>
        <price>9.90</price>
        <year>1982</year>
    </cd>
</catalog>

XSL 文件的内容：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" />
<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th>Title</th>
        <th>Artist</th>
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title"/></td>
        <td><xsl:value-of select="artist"/></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

但是转换后的 XML 没有 HTML 属性；它看起来像这样：

它应该如下所示：

这是填充 DOM 的函数，这是问题的原因：

//Load the XML document and XSLT document into XML DOM objects
var xml = document.implementation.createDocument("", "", null);
var xslt = document.implementation.createDocument("", "", null);

//Set the async property on both documents to false so that they both completely load 
//before any further processing is attempted.
xml.async = false;
xslt.async = false;

//Load XML and XSLT documents into the XML DOM objects.
xml.load("w3.xml");
xslt.load("w3.xsl");

//Create a new XSLTProcessor object and use its importStylesheet() method to import the XSLT DOM object.
var processor = new XSLTProcessor();
processor.importStylesheet(xslt);

//Transform the XML to a new XML DOM object with the transformToDocument() method of the XSLTProcessor.
var XmlDom = processor.transformToDocument(xml)

//Create a new XMLSerializer and use it to serialize the new XML DOM object to a string.
var s = new XMLSerializer(); 
var output = s.serializeToString(XmlDom.documentElement);

//The result can then be output to the innerHTML property of any element on the page.
var outputDiv = document.getElementById("xmldata");
outputDiv.innerHTML = output;
4

1 回答 1

0

我认为您的“主机”HTML 页面必须具有将 HTML 标识为 HTML5 的 DOCTYPE。

然后，因为您正在尝试添加属性，例如在 HTML 5 中已过时的bgcolor （请参阅W3C：HTML5 与 HTML4 的区别），它们会被忽略，因此不会添加到 DOM 中。

尝试改用样式属性 - 按照链接页面中的建议。

tr 元素的 XSLT 将如下所示：

 <xsl:template match="/">
 ...
  <tr style="background-color:#9acd32;"> 
    <th>Title</th> 
    <th>Artist</th> 
  </tr>
 ...
  </xsl:template>
于 2012-04-24T07:11:43.297 回答