如何正確隱藏使用javascript的XSL處理的XML元素列表

Question

早上好。我有一個XML文件，其中包含構建輸出中的警告和錯誤列表。我已經成功地編寫了XSL來迭代單獨的警告和錯誤列表，讓它們顯示在我的瀏覽器中。接下來我想要添加一些javascript以添加鏈接/按鈕以切換顯示警告。我無法讓它正常工作。

這裏是relvant代碼（下調到什麼我希望是要領）

<xsl:template match="/"> 
    <xsl:variable name="messages" select="/cruisecontrol//buildresults//message" /> 
    <xsl:variable name="warning.messages" select="$messages[(contains(text), 'warning ')) or @level='Warning']" /> 
    <xsl:variable name="warning.messages.count" select="count($warning.messages)" /> 
    <xsl:if test="$warning.messages.count > 0"> 
     <script type="text/javascript"> 
      function toggleWarnings() { 
       eDiv = document.getElementById("warnings"); 
       tDiv = document.getElementById("warningsTitle"); 
       if (eDiv.style.display == "none") { 
        eDiv.style.display = "inline"; 
        tDiv.innerText = "Hide Warnings"; 
       } else { 
        tDiv.innerText = "View Warnings"; 
        eDiv.style.display = "none"; 
       } 
      } 
     </script> 
     <table> 
      <tr> <td> 
       <a href="javascript:void()" onclick="javascript:toggleWarnings(); return false;"> 
        <span id="warningsTitle">View Warnings</span> 
       </a> 
      </td> </tr> 
      <xsl:for-each select="$warning.messages"> 
       <tr> <td class="warning" id="warnings" style="display: none;"> 
        <xsl:value-of select="."/> 
       </td> </tr> 
      </xsl:for-each> 
     </table> 

，我有是，只有一個警告打「查看警告」鏈接後顯示過的problemt。我的問題是，我知道足夠的HTML，XSL和JavaScript有點危險，並且組合證明我不夠了解:-)

有沒有簡單的方法讓我遍歷XSL元素，顯示然後在一個表中，也可以隱藏鏈接切換下的所有這些元素？

謝謝。

Answer 1

給這個去 - 評論是在代碼中。

<xsl:template match="/"> 
<xsl:variable name="messages" select="/cruisecontrol//buildresults//message" /> 
<xsl:variable name="warning.messages" select="$messages[(contains(text), 'warning ')) or @level='Warning']" /> 
<xsl:variable name="warning.messages.count" select="count($warning.messages)" /> 
<xsl:if test="$warning.messages.count > 0"> 
    <script type="text/javascript"> 
     function toggleWarnings() 
     { 
      // Get the table 
      var table = document.getElementById("warnings"); 

      // Get all the rows in the table 
      var rows = table.getElementsByTagName('tr'); 

      tDiv = document.getElementById("warningsTitle"); 

      if (tDiv.innerHTML == 'View Warnings') 
      { 
       for (var i = rows.length - 1; i >= 0; i--) 
       { 
        // Skip any rows that aren't warnings 
        if (rows[i].className != 'warning') 
         continue; 

        try 
        { 
         // Try it the right way 
         rows[i].style.display = 'table-row'; 
        } 
        catch (e) 
        { 
         // Try it the IE way 
         rows[i].style.display = 'block'; 
        } 

       tDiv.innerHTML = "Hide Warnings"; 
      } 
      else 
      { 
       for (var i = rows.length - 1; i >= 0; i--) 
       { 
        // Skip any rows that aren't warnings 
        if (rows[i].className != 'warning') 
         continue; 

        rows[i].style.display = 'none'; 
       } 

       tDiv.innerHTML = "View Warnings"; 
      } 

      return false; 
     } 
    </script> 
    <!-- Moved the ID to the table - IDs must be unique! --> 
    <table id="warnings"> 
     <tr> 
      <td> 
       <!-- This is must shorter, and "javascript:" inside onclick is plain wrong --> 
       <a href="#" onclick="return toggleWarnings();"> 
        <span id="warningsTitle">View Warnings</span> 
       </a> 
      </td> 
     </tr> 
     <xsl:for-each select="$warning.messages"> 
      <!-- Moved the class to the tr --> 
      <tr class="warning" style="display: none;"> 
       <td> 
        <xsl:value-of select="."/> 
       </td> 
      </tr> 
     </xsl:for-each> 
    </table>