0

我想在下拉列表中显示带有所选月份值的表格，首先我隐藏了表格，用javascript中的一个函数显示表格，现在我不知道如何只显示与本月相关的信息. 可以在 xsl 代码中使用 if 语句吗？谢谢。

书籍.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="tabla.xsl"?>
<TotalBooks>
    <books month= "January">
       <book>
         <isbn> 1 </isbn>
         <tittle>The tittle</tittleo>
         <author>Me</author>
       </book>
       <book>
         <isbn> 2 </isbn>
         <tittle>The tittle two</tittleo>
         <author>Me</author>
       </book>
    </books>
</TotalBooks>

书籍.xsl

<html>
  <head>
    <script>
      function TryOption() 
      { 
         tabla.style.visibility="visible";          
      }

    </script>
  </head>
  <body>
    <h1>My books</h1>
    <div>
      <label> Sales/ month: </label>
      <select>
        <option> </option>
        <xsl:for-each select="TotalBooks/books">
          <option onclick="TryOption();">
            <xsl:value-of select="@month"/>
          </option>
        </xsl:for-each>
      </select>
    </div>
    <div>
      <table id="tabla">
        <tr bgcolor="skyblue">
          <th align="left">Tittle</th>
          <th align="left">Author</th>
        </tr>
        <xsl:for-each select="TotalBooks/books/book">
          <tr>
            <td>
              <xsl:value-of select="tittle"/>
            </td>
            <td>
              <xsl:value-of select="author"/>
            </td>
          </tr>
        </xsl:for-each>
      </table>
    </div>
  </body>
</html>

4

2 回答 2

1

请试一试：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>

  <xsl:template match="/">
    <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script>
          function TryOption(value)
          {
              $('.book').hide();
              if(value != '') {
                 $('.' + value).show();
              }
          }
        </script>
        <style>
          .book { display: none; }
        </style>
      </head>
      <body>
        <h1>My books</h1>
        <div>
          <label> Sales/ month: </label>
          <select onchange="TryOption(this.value);">
            <option> </option>
            <xsl:apply-templates select="TotalBooks/books" />
          </select>
        </div>
        <div>
          <table id="tabla">
            <tr bgcolor="skyblue">
              <th align="left">Tittle</th>
              <th align="left">Author</th>
            </tr>
            <xsl:apply-templates select="TotalBooks/books/book" />
          </table>
        </div>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="books">
    <option value="{@month}">
      <xsl:value-of select="@month"/>
    </option>
  </xsl:template>

  <xsl:template match="book">
    <tr class="book {../@month}">
      <td>
        <xsl:value-of select="tittle"/>
      </td>
      <td>
        <xsl:value-of select="author"/>
      </td>
    </tr>
  </xsl:template>
</xsl:stylesheet>

要点：

  • onchange将事件处理程序移至select
  • value向option元素添加属性
  • 添加课程以按月识别书籍
  • 使用 JavaScript 按类隐藏和显示项目
于 2013-03-16T15:10:24.167 回答
1

要获得工作代码，您需要做几件事：

第 1 步- 修复您的 XML 文件

您的<title> 标签已关闭，</titleo>这显然是错误的。

第 2 步- 修复 XSLT 文件

添加 XSLT 文档声明，因此形成如下：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
  <xsl:output method="xml" indent="yes" />

  <xsl:template match="/">
    <html>
      <!-- Rest of the stylesheet may be here -->
    </html>
  </xsl:template>
</xsl:stylesheet>

第 3 步- 重新考虑您的代码

您的代码有几个问题：

  1. 您计划创建一个包含所有月份行的大表。这个是可以做到的，但是以后在JS中会比较难处理。只显示/隐藏一个表格比单独显示/隐藏每一行更容易。
  2. 您正在使用onclick> <option。我建议使用onchangeon <select>。

第 4 步- 将更多数据添加到 XML 文件

这将使您以更明显的方式测试您的代码。只需复制<books>一月并将月份名称更改为二月。

第 5 步- 修复 XSLT

请查找以下代码作为示例。这段代码远未完成，但它向您展示了方向。请参考我的内联评论。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
  <xsl:output method="xml" indent="yes" />

<xsl:template match="/">

<html>
  <head>
  <script>
  /* <select> is a parameter */
  function TryOption(select)
  {
     /* get the name of the selected month */
     var month = select.options[select.selectedIndex].value;

     /* show the table corresponding to this month */
     document.getElementById('table-'+month).style.display="block";

     /* you should also hide other tables - it's not done here */
  }
  </script>
  </head>

  <body>
    <h1>My books</h1>
    <div>
      <label> Sales/ month: </label>

      <!-- 'onchange' event here -->
      <select onchange="TryOption(this)">
        <option></option>
        <xsl:for-each select="TotalBooks/books">
          <!-- each <option> has a 'value' attribute with the name of th month
               On example:
                <option value="January">January</option> --> 
          <option>
            <xsl:attribute name="value"><xsl:value-of select="@month"/></xsl:attribute>
            <xsl:value-of select="@month"/>
          </option>
        </xsl:for-each>
      </select>
    </div>
    <div>
      <!-- For each <books> tag (which represents one month) create new table.
           Table's id = 'table'+month, on example 'table-January'.
           Each table is hidden by default. -->
      <xsl:for-each select="TotalBooks/books">
        <table style="display: none">
          <xsl:attribute name="id">table-<xsl:value-of select="@month"/></xsl:attribute>
          <tr bgcolor="skyblue">
            <th align="left">Tittle</th>
            <th align="left">Author</th>
          </tr>
          <!-- For each book in the given month, list those. 
               This 'for-each' only loops over books from one month,
               because this loop is inside another loop -->
          <xsl:for-each select="book">
            <tr>
              <td><xsl:value-of select="tittle"/></td>
              <td><xsl:value-of select="author"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </xsl:for-each>
    </div>
  </body>
</html>

</xsl:template>
</xsl:stylesheet>
于 2013-03-16T14:52:35.977 回答