Javascript 如何正确使用XSLTProcessor向现有html页面填写表格（或添加独立元素）？_Javascript_Html_Xml_Xslt

Javascript 如何正确使用XSLTProcessor向现有html页面填写表格（或添加独立元素）？

javascript html xml xslt

Javascript 如何正确使用XSLTProcessor向现有html页面填写表格（或添加独立元素）？,javascript,html,xml,xslt,Javascript,Html,Xml,Xslt,我试图在Safari和Firefox上使用XSLT在用户命令上加载一个表。我仍然是一个初学者，但是已经成功地从XSL文件中的转换HTML标记创建了一个完整的文档，而这里我只是尝试补充文档的一部分，在XSL文件中，AD和tbody标记将附加到HTML文件中的表标记上下面的代码是我迄今为止的尝试，这是我项目的一个简化示例。当XSL输出方法设置为HTML或XHTML时，输出看起来类似于字符串。当它是XML时，输出至少在某种程度上是格式化的，尽管仍然不是我所期望的HTML表 XML:test.XML

我试图在Safari和Firefox上使用XSLT在用户命令上加载一个表。我仍然是一个初学者，但是已经成功地从XSL文件中的转换HTML标记创建了一个完整的文档，而这里我只是尝试补充文档的一部分，在XSL文件中，AD和tbody标记将附加到HTML文件中的表标记上

下面的代码是我迄今为止的尝试，这是我项目的一个简化示例。当XSL输出方法设置为HTML或XHTML时，输出看起来类似于字符串。当它是XML时，输出至少在某种程度上是格式化的，尽管仍然不是我所期望的HTML表

XML:test.XML

XSL:test.XSL

HTML:test.HTML

我已经浏览了有关xslt处理器和JS的页面，发现它们是相似的。然而，我仍然无法让这个工作。有时他们的信息已经过时，但我也在下面关于在客户端上转换的评论中查看/使用了w3schools示例链接

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

我认为使用Mozilla Firefox，您的尝试在Javascript和XSLT以及XSLTProcessor API的使用方面基本上是好的，只有当您想用CSS设置一个表的样式时，才需要确保完全设置它的样式，或者像我一样懒惰，并使用frame和rules属性

在Firefox25上这样做对我来说很好。我还编辑了脚本代码以使用IE的MSXMLAPI，然后该示例也可以与IE 10配合使用，我不确定旧版本，请自己测试

至于Google Chrome，它似乎确实在生成HTML节点片段（如thead和tbody）时遇到了问题，因为我不理解transformToFragment返回的片段只包含文本。其他人需要在这方面提供帮助

我举个例子。

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

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

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