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

How to show information in a table depending of the attribute value (XML-XSLT)

本文关键字：信息显示 XML-XSLT 何根属性更新时间：2023-09-26

我想在下拉列表中显示所选月份的值的表，首先我有表隐藏，用javascript中的函数我显示表，现在我不知道如何显示相对于这个月的信息。可以在XSL代码中使用if语句吗?感谢。

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>

请尝试一下:

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

要点:

将事件处理程序移动到select的onchange事件
value属性添加到option元素
增加按月识别图书的类
使用JavaScript隐藏和显示项目的类

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

步骤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 -重新考虑你的代码

你的代码有几个问题:

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

步骤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>