Question

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

books.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>

Books.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>

Answer 1

要了解工作代码，您需要做几件事：

第1步 - 修复您的XML文件

您的<title＆gt;标签以</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步 - 重新考虑您的代码

您的代码存在以下问题：

您打算为所有月份创建一个包含行的大表。这可以做到，但稍后在JS中将更难处理。显示/隐藏一个表比单独显示/隐藏每一行更容易。
您在onclick＆gt;上使用<option。我建议在onchange上使用<select>。

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

这将让您以更明显的方式测试代码。只需复制1月的<books>，然后将月份名称更改为2月。

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

Answer 2

请试一试：

<?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隐藏和按类显示项目

如何根据属性值在表中显示信息（XML-XSLT）

2 个答案: