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

标签 javascript html xml xslt

我想在下拉列表中显示带有所选月份值的表格,首先我隐藏了表格,用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>

最佳答案

请尝试一下:

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

要点:

  • 将事件处理程序移至 selectonchange 事件
  • option 元素添加 value 属性
  • 添加了按月识别书籍的类(class)
  • 使用 JavaScript 按类隐藏和显示项目

关于javascript - 如何根据属性值在表中显示信息 (XML-XSLT),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15450254/

相关文章:

ruby - 如何在Nokogiri中收集节点的几个元素中的第一个

javascript - JS onKeyup Counter - 当他变成负数时如何改变计数器的颜色?

javascript - 如果所选数字小于时钟中的当前时间,如何禁用数字

html - 使用离线 css 时,glyphicon 向上箭头不起作用

html - tabIndex 作为 css 属性?

java - 如何动态创建XML(java)?

javascript - 在 jquery 中删除一个 div 不起作用

javascript - 在 Mac 或 PC 上的 Outlook Office 365 或 Outlook 桌面中自动密件抄送

javascript - Jquery Bootstrap Datepicker禁用过去的日期并且不自动填充输入框

c++ - 带有 C++ TCP 套接字的 CodeSynthesis XML