如何正确使用XSLTProcessor向现有html页面填充表(或添加独立元素）

How to correctly use the XSLTProcessor to fill out a table (or add a stand-alone element) to an existing html page?

本文关键字：填充 添加 元素 独立 何正确 XSLTProcessor html      更新时间：2024-04-04

我正试图在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:（test.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的内容，发现了类似的问题。然而，我仍然无法让它发挥作用。有时他们的信息已经过时，但我也查看/使用了w3schools关于在客户端上进行转换的示例（下面评论中的链接）。

很抱歉这篇文章太长了——我知道我还有很多东西要学，所以我很感激任何关于解决方案的指导。提前感谢！

我认为使用Mozilla火狐，在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节点的片段时遇到了问题，因为我不理解transformToFragment返回的片段只包含文本。其他人需要在这方面提供帮助。

相关文章：