如何使用javascript根据html文件中的下拉值过滤xsl文件？_Javascript_Xslt_Javascript Events_Xslt 1.0

如何使用javascript根据html文件中的下拉值过滤xsl文件？

javascript xslt

如何使用javascript根据html文件中的下拉值过滤xsl文件？,javascript,xslt,javascript-events,xslt-1.0,Javascript,Xslt,Javascript Events,Xslt 1.0,这是我的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; v

这是我的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>


个人信息
变量IE=window.ActiveXObject？真：假；
var MOZ=document.implementation.createDocument？真：假；
var xmlFile=“person.xml”；
var xsltFile=“person.xsl”；
var-xmlDoc；
var-xsltoc；
函数createXDoc（xFile，PID）
{
如果（即）{
xDoc=新的ActiveXObject（getPID（PID））；
}
else if（MOZ）{
xDoc=document.implementation.createDocument（“，”，null）；
}
loadDoc（xDoc，xFile）；
返回xDoc；
}
函数runTransform（xDoc、xsltDoc）{
如果（即）{
var resultStr=xDoc.transformNode（xsltDoc）；
}
}               
函数init（）
{
var myElem=document.getElementById（“persontable”）；
xmlDoc=createXDoc（xmlFile，DOMPID）；
xsltDoc=createXDoc（xsltFile，DOMPID）；
myElem.innerHTML=runTransform（xmlDoc，xsltDoc）；
}
个人信息
医疗保险
锰

这是我的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>


名字
姓

我可以通过下拉菜单查看页面，但无法让下拉菜单与页面交互

任何帮助都将不胜感激

谢谢

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

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

这是微不足道的

我建议您改为服务器端转换，而不是客户端转换。如果是服务器端，实际的样式表将不同

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


个人信息
window.onload=函数（）{
var statedropdown=document.getElementById（“statedropdown”）；
statedropdown.onchange（）；
}
函数showHideRows（selectedState）{
var table=document.getElementById（'persontable'）；
for（var r=0，n=table.rows.length；r


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

更新
下面是转换后的示例输出文档。我没有包括实际的（单个）样式表，因为：
这是微不足道的
我建议您改为服务器端转换，而不是客户端转换。如果是服务器端，实际的样式表将不同
<!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>


个人信息
window.onload=函数（）{
var statedropdown=document.getElementById（“statedropdown”）；
statedropdown.onchange（）；
}
函数showHideRows（selectedState）{
var table=document.getElementById（'persontable'）；
for（var r=0，n=table.rows.length；r

我知道这对一些人来说是老生常谈的。我已经5年多没有使用XSLT了，并且已经忘记了大部分内容。我扩展了Sean B.Durkin的答案，以展示更多的代码（至少我是如何实现缺少的部分的）。我只在FireFox中测试过，不确定它是否能在其他浏览器中使用
使用XML文件中的第二行将XSL绑定到XML：
<?xml-stylesheet type="text/xsl" href="test.xsl" ?>



XML（test.XML）：

简
惠特尼
医疗保险
杰克
尼科尔森
医疗保险
简
爱
锰
迈克尔
约翰逊
锰

XSL（test.XSL）：

身体
{
字体系列：arial，无衬线；
颜色：#000；
字体大小：13px；
颜色：#333；
}
桌子
{
字号：1em；
边缘：0.01米；
边界塌陷：塌陷；
边框宽度：0；
空单元格：显示；
}
td，th
{
边框：1px实心#ccc；
填充：6px 12px；
文本对齐：左对齐；
垂直对齐：顶部；
背景色：继承；
}
th
{
背景色：#dee8f1；
}
window.onload=函数（）{
var statedropdown=document.getElementById（“状态过滤器”）；
statedropdown.onchange（“全部显示”）；
}
函数showHideRows（selectedState）{
//警报（“showHideRows selectedState:+selectedState”）；
var table=document.getElementById（'display_table'）；
<?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>