0

ドロップダウンリストで選択した月の値を含むテーブルを表示したいのですが、最初にテーブルを非表示にし、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>

4

2 に答える 2

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. すべての月の行を含む1つの大きなテーブルを作成することを計画しています。これは可能ですが、後でJSで処理するのはさらに難しくなります。各行を個別に表示/非表示にするよりも、1つのテーブルを表示/非表示にする方が簡単です。
  2. >で使用onclickしてい<optionます。での使用を提案しonchangeます<select>。

ステップ4 -XMLファイルにデータを追加する

これにより、より明白な方法でコードをテストできます。1月のをコピーし、月の<books>名前を2月に変更するだけです。

ステップ5 -XSLTを修正する

例として次のコードを見つけてください。このコードは完全にはほど遠いですが、方向性を示しています。Pleseは私のインラインコメントを参照してください。

<?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 に答える
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 に答える