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

Question

I am trying to load a table using XSLT on a user's command on Safari and Firefox. 我正在尝试在Safari和Firefox的用户命令上使用XSLT加载表。 I am still a beginner, but have had success creating a complete document from the transformation (HTML tags in the XSL file) as opposed to here where I am trying to only supplement a portion of the document ( thead and tbody tags are in the XSL file to be appended on the table tags in the HTML file). 我仍然是一个初学者，但是已经成功地通过转换（在XSL文件中的HTML标签）创建了一个完整的文档，而在这里我只尝试补充文档的一部分（ thead和tbody标签在XSL中）附加到HTML文件中table标签上的文件）。

The code below is my attempt so far (this is a simplified example of my project). 到目前为止，以下代码是我的尝试（这是我的项目的简化示例）。 When the XSL output method is set to "HTML" or "XHTML" the output appears to be similar to a string. 当XSL输出方法设置为“ HTML”或“ XHTML”时，输出似乎类似于字符串。 When it is "XML", the output is at least somewhat formatted, though still not in what I expected as an HTML table. 当它是“ XML”时，输出至少会进行某种格式设置，尽管仍未达到我期望的HTML表格式。

XML: (test.xml) 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) 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) 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>

I have looked over these two pages covering the xslt processor and JS and have seen this question that is similar. 我已经看过了这 2页覆盖XSLT处理器和JS和已经看到这个问题是相似的。 However I still am unable to get this to work. 但是，我仍然无法使它正常工作。 Sometimes their information is outdated, but I have also looked over/used the w3schools example (link in a comment below) on transforming on the client. 有时他们的信息已经过时了，但是我也仔细研究过/使用了w3schools示例（在下面的评论中链接）来进行客户端转换。

Sorry for the length of this post--I know I still have a lot to learn, so I appreciate any guidance towards a solution. 很抱歉，这篇文章太长了-我知道我还有很多东西要学习，因此，我很感谢提供解决方案的指导。 Thanks in advance! 提前致谢！

Answer 1

I think with Mozilla respectively Firefox your attempt is mostly fine in terms of Javascript and XSLT and the use of the XSLTProcessor API, only if you want to style a table with CSS then you need to make sure you style it completely or be lazy like me and use the frame and rules attribute. 我认为分别使用Mozilla和Firefox而言，就Javascript和XSLT以及XSLTProcessor API的使用而言，您的尝试通常都很好，只有当您想要使用CSS设置表格样式时，才需要确保完全设置样式或像我一样懒并使用frame和rules属性。

Doing that http://home.arcor.de/martin.honnen/xslt/test2013120601.html works fine for me with Firefox 25. I also edited the script code to use IE's MSXML API, then the example also works fine with IE 10, I am not sure about older versions, test yourself. 在Firefox 25上对我来说http://home.arcor.de/martin.honnen/xslt/test2013120601.html可以很好地工作。我还编辑了脚本代码以使用IE的MSXML API，然后该示例在IE 10中也可以正常工作，我不确定较旧的版本，请进行测试。

As for Google Chrome, it indeed seems to have a problem generating a fragment of HTML nodes like thead and tbody , for reasons I don't understand the fragment returned by transformToFragment only contains text. 至于谷歌浏览器，生成诸如thead和tbody类的HTML节点片段似乎确实存在问题，原因是我不明白transformToFragment返回的片段仅包含文本。 Someone else will need to help on this. 其他人将需要帮助。

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

问题描述

1 个解决方案

解决方案1
0 2013-12-06 10:38:08

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

问题描述

1 个解决方案

解决方案1 0 2013-12-06 10:38:08

解决方案1
0 2013-12-06 10:38:08