我正在尝试根据 Safari 和 Firefox 上的用户命令使用 XSLT 加载表格。我仍然是一个初学者，但已经成功地从转换(XSL 文件中的 HTML 标签)创建了一个完整的文档，而不是在这里我尝试仅补充文档的一部分(thead和 tbody 标记位于 XSL 文件中，将附加到 HTML 文件中的 table 标记上)。
下面的代码是我迄今为止的尝试(这是我的项目的简化示例)。当 XSL 输出方法设置为“HTML”或“XHTML”时，输出看起来类似于字符串。当它是“XML”时，输出至少在某种程度上被格式化，尽管仍然不是我所期望的 HTML 表。
XML:(test.xml)
<people>
<person personID="1054">
<info>
<name>
<first>Mathew</first>
<last>Johnson</last>
</name>
<phone>5550446932</phone>
<address>
<street>5555 NW Terrygold Place</street>
<city>Davis</city>
<state>California</state>
</address>
<email>glennjohnson@email.com</email>
</info>
</person>
<person personID="1055">
<info>
<name>
<first>Elizabeth</first>
<last>Johnson</last>
</name>
<phone>5553542932</phone>
<address>
<street>5555 NW Terrygold Place</street>
<city>Davis</city>
<state>California</state>
</address>
<email>glennjohnson@email.com</email>
</info>
</person>
<person personID="1056">
<info>
<name>
<first>Bernhardt</first>
<last>Johnson</last>
</name>
<phone>5554195424</phone>
<address>
<street>5555 NW Terrygold Place</street>
<city>Davis</city>
<state>California</state>
</address>
<email>mathewjohnson@email.com</email>
</info>
</person>
<person personID="1057">
<info>
<name>
<first>Robert</first>
<last>Loblaw</last>
</name>
<phone>5554186971</phone>
<address>
<street>5555 Ramona Dr</street>
<city>Newport Beach</city>
<state>California</state>
</address>
<email>bobloblaw@email.com</email>
</info>
</person>
<person personID="1058">
<info>
<name>
<first>Evelynn</first>
<last>Widowmaker</last>
</name>
<phone>5551545638</phone>
<address>
<street>5555 Shadow Isles</street>
<city>Portland</city>
<state>Oregon</state>
</address>
<email>op@email.com</email>
</info>
</person>
</people>
XSL:(测试.xsl)
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/">
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<xsl:apply-templates/>
</tbody>
</xsl:template>
<xsl:template match="person">
<tr>
<td>
<xsl:value-of select="concat(info/name/first, ' ', info/name/last)"/>
</td>
<td>
<xsl:value-of select="info/address/state"/>
</td>
<td>
<xsl:value-of select="info/phone"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
HTML:(test.html)
<!DOCTYPE html>
<html>
<head>
<title>Example XSLT Table</title>
<style>
body {
cursor : default;
}
table {
width : 400px;
height : 300px;
border : solid;
}
</style>
</head>
<body>
<input id="examplebutton" type="submit" value="Load Table">
<table id="exampletable">
</table>
<footer></footer>
<script type="text/javascript" charset="utf-8">
var xml = loadX("test.xml");
var xsltTable = loadX("test.xsl");
var button = document.getElementById("examplebutton");
var table = document.getElementById("exampletable");
var useAX = (window.ActiveXObject)? true : false;
button.addEventListener("click", function () {loadTable();}, false);
function loadTable() {
var output = getStyledXML(xml, xsltTable);
table.innerHTML = "";
table.appendChild(output);
}
function loadX (fileName) {
var xhttpR;
if (useAX) {
xhttpR = new ActiveXObject("Msxml2.XMLHTTP.3.0");//I have little to no ie experience (and haven't tried this yet), so this may not make any sense.
}
else {
xhttpR = new XMLHttpRequest();
}
xhttpR.open("GET", fileName, false);
xhttpR.send(null);
return(xhttpR.responseXML);
}
function getStyledXML (data, style) {
var result;
if (useAX) {
result = data.transformNode(style);
}
else {
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(style);
result = xsltProcessor.transformToFragment(data, document);
}
return(result);
}
</script>
</body>
</html>
我查看了涵盖 xslt 处理器和 JS 的 these two 页面，并看到了类似的 this question。但是我仍然无法让它发挥作用。有时他们的信息已经过时，但我也查看/使用了 w3schools 示例(下面评论中的链接)在客户端上进行转换。
抱歉这篇文章太长了——我知道我还有很多东西要学，所以我很感谢任何关于解决方案的指导。提前致谢!
最佳答案
我认为，对于 Mozilla 和 Firefox，您的尝试在 Javascript 和 XSLT 以及 XSLTProcessor API 的使用方面基本上都很好，只有当您想使用 CSS 设计表格时，您才需要确保完全设计它的样式，或者像我一样懒，使用 frame 和 rules 属性。
这样做http://home.arcor.de/martin.honnen/xslt/test2013120601.html我在 Firefox 25 上工作得很好。我还编辑了脚本代码以使用 IE 的 MSXML API，那么该示例在 IE 10 上也工作得很好，我不确定旧版本，请自行测试。
对于 Google Chrome，它确实似乎在生成 thead 和 tbody 等 HTML 节点片段时遇到问题，因为我不明白返回的片段by transformToFragment 仅包含文本。其他人需要为此提供帮助。
关于javascript - 如何正确使用 XSLTProcessor 向现有 html 页面填写表格(或添加独立元素)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20413425/