0

ユーザーが簡単なフォームを使用して単語を追加できるオンライン辞書のようなものを作成しています。その後、ページ内のすべての単語を単語のアルファベット順に表示できます。問題は、アルファベット順に表示されないことですが、挿入順に。

データを含むファイルである res.xml、アルファベット順に res.xml をソートすることになっている tt.xsl、およびデータをユーザーに表示する index.html の 3 つのファイルを取得しました。属性「WORD」を使用してxmlファイルに含まれるデータをアルファベット順に並べ替えますが、index.htmlを実行するとソートされず、データを読み取る順序で表示されるだけです。それを機能させる最も簡単な方法は何ですか?

ここに3つのファイルがあります

これは、視覚化するために使用しているスクリプトを含む HTML ファイルです

<html>
<body>

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","res.xml",false);

xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("TERM");for (i=0;i<x.length;i++)
{ 
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("WORD")[0].childNodes[0].nodeValue);
document.write("</td><td>");

document.write("</td><td>");
document.write(x[i].getElementsByTagName("LANGUAGE")[0].childNodes[0].nodeValue);
document.write("</td><td>");

document.write(x[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
document.write("</td></td>");

document.write("</td><td>");
document.write(x[i].getElementsByTagName("EDITBY")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>

</body>
</html>

//------------------------------ これは XML ファイル res.xml です

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->


<?xml-stylesheet type="text/xsl" href="tt.xsl"?>

<LIBRARY>
<TERM>
<EDITBY>giovanni</EDITBY>
<WORD>ciao</WORD>
<LANGUAGE>Italian</LANGUAGE>
<DESCRIPTION>
it means hi
</DESCRIPTION>  
</TERM>


<TERM>
<EDITBY>giacomo</EDITBY>
<WORD>all</WORD>
<LANGUAGE>italian</LANGUAGE>
<DESCRIPTION>
significa tutto
</DESCRIPTION>  
</TERM>

</LIBRARY>

//----------------------------------

これは XSL tt.xsl です

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

<xsl:template match="/">



<xsl:for-each select="LIBRARY/TERM">
  <xsl:sort select="WORD"/>
  <tr>
    <td><xsl:value-of select="LANGUAGE"/></td>
    <td><xsl:value-of select="WORD"/></td>
  </tr>
</xsl:for-each>


</xsl:template>
</xsl:stylesheet>

結果、データは表示されますが、アルファベット順ではありません

どんな助けでも大歓迎です

4

2 に答える 2

0

Looking at the javascript, after getting the XML, you are performing commands such as getElementsByTagName("WORD"). WORD is an element in your input XML, but your XSLT would transform your XML input tr and td. This should give you a clue that your XSLT is doing actually being called, and your XML is not being transforming. All your javascript is doing is reading the elements from the XML in the order they appear.

Now, in your XML you do have this processing instruction:

<?xml-stylesheet type="text/xsl" href="tt.xsl"?>

But this 'instruction' is only going to be 'processed' if the XML was access directly in the browser (i.e you type "res.xml" into the URL to display the XML). Reading the XML file with javascript will not actually pay any attention to this processing instruction. You are simply reading the contents of the file at this point, and it is up to you to write code to act on it.

It is not too hard to write javascript to perform an XSLT transformation. The main fiddliness comes from IE doing it different to Firefox and Chrome. I did a quick search on Stack Overflow, and found this question which explains how to do it

http://stackoverflow.com/questions/5722410/how-can-i-use-javascript-to-transform-xml-xslt

Here is the adaptation of the javascript provided that should work in this case

<html>
<body>

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","test.xml",false);

xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

xmlhttp.open("GET","test.xslt",false);

xmlhttp.send();
xsl=xmlhttp.responseXML; 

var result;

// IE method
if (window.ActiveXObject) {
    result = new ActiveXObject("MSXML2.DOMDocument");
    xmlDoc.transformNodeToObject(xsl, result);

// Other browsers
} else {
    result = new XSLTProcessor();
    result.importStylesheet(xsl);
    result = result.transformToDocument(xmlDoc);
}

var x, ser, s = '';

// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += result.childNodes[x].xml;
    }
// Other browsers
} else {
    ser = new XMLSerializer();
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += ser.serializeToString(result.childNodes[x]);
    }
}

document.write(s);

</script>
</body>
</html>

The only thing to note here, is that it would be better to output the "table" element in your XSLT too. So, you XSLT would look something like this

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:output method="html" />

<xsl:template match="/">
<table border="1">
<xsl:for-each select="LIBRARY/TERM">
  <xsl:sort select="WORD"/>
  <tr>
    <td><xsl:value-of select="LANGUAGE"/></td>
    <td><xsl:value-of select="WORD"/></td>
  </tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
于 2013-10-11T15:14:37.023 に答える
0

以下のように、出力要素を XSL に追加する必要があります。

<xsl:output method="html"/>

これは、スタイルシート タグのすぐ下に配置されます。

これは、出力タグに追加できる最小限の情報です。これがないと、一部の (すべて?) プロセッサが XSL をまったく処理できなくなります。

補足として、JavaScript で何をしているのかは完全にはわかりませんが、余分なスクリプトを作成しなくても、XSL 内にテーブル構造全体を作成できるはずです。しかし、それは 2 番目の質問のトピックになります。

したがって、この XML を実行すると

<LIBRARY>
  <TERM>
    <EDITBY>giovanni</EDITBY>
    <WORD>ciao</WORD>
    <LANGUAGE>Italian</LANGUAGE>
    <DESCRIPTION>
      it means hi
    </DESCRIPTION>  
  </TERM>
  <TERM>
    <EDITBY>giacomo</EDITBY>
    <WORD>all</WORD>
    <LANGUAGE>italian</LANGUAGE>
    <DESCRIPTION>
      significa tutto
    </DESCRIPTION>  
  </TERM>
</LIBRARY>

このXSLで

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <xsl:for-each select="LIBRARY/TERM">
      <xsl:sort select="WORD"/>
      <tr>
        <td><xsl:value-of select="LANGUAGE"/></td>
        <td><xsl:value-of select="WORD"/></td>
      </tr>
    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

WORD 要素でソートされた情報を含むこの HTML を取得します。

<tr>
<td>italian</td><td>all</td>
</tr><tr>
<td>Italian</td><td>ciao</td>
</tr>
于 2013-10-10T18:20:41.627 に答える