1

这是我的 htm 文件，包括 Javascript 函数。

<html>
<head>
<title>Personal Info</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript">
   var IE= window.ActiveXObject ? true:false;
   var MOZ= document.implementation.createDocument ? true: false;
   
   var xmlFile="person.xml";
   var xsltFile="person.xsl";
       
   var xmlDoc;  <!--//Source XML document-->
   var xsltDoc; <!--//XSLT style sheet document for person.xsl-->

   function createXDoc(xFile, PID)
   {
    if (IE) {
    xDoc=new ActiveXObject(getPID(PID));
    }
    else if (MOZ) {
    xDoc= document.implementation.createDocument("", "", null);
    }
           
    loadDoc(xDoc, xFile);
    return xDoc;
    }
   
function runTransform(xDoc, xsltDoc) {
    if (IE) {
    var resultStr=xDoc.transformNode(xsltDoc);
         }
    }               
function init() 
           {
           var myElem= document.getElementById("persontable");
           xmlDoc=createXDoc(xmlFile, DOMPID);
           xsltDoc= createXDoc(xsltFile, DOMPID);
           myElem.innerHTML=runTransform(xmlDoc, xsltDoc);
     }
</script>
</head>
<body>
<div>
<h1 class="title">
  PERSONAL INFO
</h1> 
     <select id="statedropdown" name="statedropdown"> 
        <option value="MI">MI</option>
        <option value="MN">MN</option>
     </select>  
</div>
<div id="persontable">
   <!--Contents goes here-->
</div>
</body>
</html>

这是我的 XML 文件。

<person>
  <first_name>Jane</first_name>
  <last_name>Whitney</last_name>
  <state>MI</state>
</person>
<person>
  <first_name>Jack</first_name>
  <last_name>Nicholson</last_name>
  <state>MI</state>
</person>
<person>
  <first_name>Jane</first_name>
  <last_name>Eyre</last_name>
  <state>MN</state>
</person>
<person>
  <first_name>Michael</first_name>
  <last_name>Johnson</last_name>
  <state>MN</state>
</person>

这是我的 XSL 文件

<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" omit-xml-declaration="yes" />
<xsl:param name="group" select="//person" />
<xsl:template match="/">
<table>
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th> 
  </tr>   
<xsl:apply-templates select="$group">
  <xsl:sort select="Last_Name" data-type="text" order="descending" />
</xsl:apply-templates> 
</table>
</xsl:template>

<xsl:template match="person">
<tr>
  <td><xsl:value-of select="First_Name" /></td>
  <td><xsl:value-of select="Last_Name" /> </td>
</tr>
</xsl:template>
</xsl:stylesheet>

我可以使用下拉菜单查看页面，但无法让下拉菜单与页面交互。

任何帮助，将不胜感激。

4

2 回答 2

1

我知道这是旧的，对某些人来说微不足道。我已经 5 年多没有使用 XSLT 了，并且已经忘记了其中的大部分内容。我已经扩展了 Sean B. Durkin 的答案以显示更多代码（至少我如何实现缺失的部分）。我只在 FireFox 中测试过，不确定它是否可以在其他浏览器中运行。

使用 XML 文件中的第二行将 XSL 绑定到 XML： 

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

XML (test.xml):

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
<?xml-stylesheet type="text/xsl" href="test.xsl" ?>
<data>
    <person>
      <first_name>Jane</first_name>
      <last_name>Whitney</last_name>
      <state>MI</state>
    </person>
    <person>
      <first_name>Jack</first_name>
      <last_name>Nicholson</last_name>
      <state>MI</state>
    </person>
    <person>
      <first_name>Jane</first_name>
      <last_name>Eyre</last_name>
      <state>MN</state>
    </person>
    <person>
      <first_name>Michael</first_name>
      <last_name>Johnson</last_name>
      <state>MN</state>
    </person>
</data>

XSL (test.xsl):

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

<xsl:key name="key_state" match="data/person" use="state"/>

<xsl:template match="/">

  <html>
      <head>
          <style type="text/css">
              body 
              {
                font-family:arial,sans-serif;
                color:#000;
                font-size:13px;
                color:#333;
              }
              table 
              {
                font-size:1em;
                margin:0 0 1em;
                border-collapse:collapse;
                border-width:0;
                empty-cells:show;
              }
              td,th 
              {
                border:1px solid #ccc;
                padding:6px 12px;
                text-align:left;
                vertical-align:top;
                background-color:inherit;
              }
              th 
              {
                background-color:#dee8f1;
              }
          </style>

          <script type="text/javascript">

                window.onload = function() {
                    var statedropdown = document.getElementById("state_filter");
                    statedropdown.onchange("Show All");
                }

                function showHideRows(selectedState) {
                    // alert( "showHideRows selectedState: " + selectedState );
                    var table = document.getElementById('display_table');
                    for (var r = 1; r &lt; table.rows.length; r++) {
                            if ( selectedState == "Show All" || selectedState == "undefined" || table.rows[r].getAttribute('data-state') == selectedState)
                        table.rows[r].style.display = '';
                      else
                          table.rows[r].style.display = 'none';
                }
                    }
            </script>    

      </head>
      <body>
      <h2>Test XML/XSL Droprdown</h2>

        <table id="display_table">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>State <br />
                <select  name="state_filter" id="state_filter" onChange="showHideRows(this.value);">
                    <option>Show All</option>
                    <xsl:for-each select="data/person[generate-id() = generate-id(key('key_state', state)[1])]">
                        <xsl:sort select="state" />
                <option><xsl:value-of select="state"/></option>
                    </xsl:for-each>"
                </select>

            </th> 

          </tr>   

            <xsl:for-each select="data/person">
                    <xsl:sort select="last_name" />
                <tr>
                    <xsl:attribute name="data-state"><xsl:value-of select="state"/></xsl:attribute>
                  <td><xsl:value-of select="first_name" /></td>
                  <td><xsl:value-of select="last_name" /></td>
                  <td><xsl:value-of select="state" /></td>
                </tr>     
        </xsl:for-each>
      </table>
      </body>
  </html>
</xsl:template>
</xsl:stylesheet>
于 2016-12-08T23:58:18.917 回答
0

如果您只有两种状态，请按原样使用样式表，为整个表格呈现 HTML，然后使用 JavaScript 和 OnClick 事件隐藏所有表格行，选定状态除外。通过使用 Javascript，而不是重新构建整个页面，您的页面将对用户输入的响应速度更快。

更新

这是转换后的示例输出文档的示例。我没有包含实际的（单个）样式表，因为：

  1. 这是微不足道的。

  2. 我建议你改成服务器端的转换，而不是客户端。如果在服务器端，实际的样式表会有所不同。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Personal Info</title>

<script type="text/javascript">

    window.onload = function(){
    var statedropdown = document.getElementById("statedropdown");
    statedropdown.onchange();
    }

  function showHideRows( selectedState){
    var table = document.getElementById('persontable');
    for (var r = 0, n = table.rows.length; r < n; r++) {
            if (table.rows[r].getAttribute('data-state') == selectedState)
             table.rows[r].style.display = 'none';
            else
             table.rows[r].style.display = ''
        }
    }
</script>    
</head>

<body>
<h1 class="title">PERSONAL INFO</h1> 
<select id="statedropdown" name="statedropdown"
             onChange="showHideRows(this.value)"> 
        <option value="MI">MI</option>
        <option value="MN">MN</option>
</select>  

<table id="persontable">
<tr>
  <th>First_Name</th>
  <th>Last_Name</th> 
</tr>   
<tr data-state="MI">
  <td>Jane</td>
  <td>Whitney</tde>
</tr>
<tr state="MI">
  <td>Jack</td>
  <td>Nicholson</td>
</tr>
<tr data-state="MN">
  <td>Jane</td>
  <td>Eyre</td>
</tr>
<tr data-state="MN">
  <td>Michael</td>
  <td>Johnson</td>
</tr>
</table>  
</body>
</html>
于 2012-08-09T00:07:52.863 回答