如何切換表格行開關

我目前在我的XSLT（html）xml樣式表中切換一些表格行。如何切換表格行開關

我有6行我隱藏3開始然後onClick命令我想隱藏1行並打開3個其他人。

這是什麼樣子

負載XML

first row - Talents_Passive | Talent/Talent_Cost 
second row - Prerequisite 
third row - Action/Range/Cost 
seventh row - Description

上點擊 //應該能夠與我的jQuery

first row - Talents_Passive | Talent/Talent_Cost 
second row - Prerequisite 
fourth row - Action 
fifth row - Range 
Sixth row - Cost 
seventh row - Description

在兩者之間切換這是我的代碼看起來像

<?xml version="1.0" encoding="ISO-8859-1"?> 
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/Collection"> 
    <html> 
    <header> 

     <script type ="text/javascript" src="jquery.js" ></script> 
     <script> 
      <!-- insert toggling here --> 


     function toggle_it(itemID){ 
     // Toggle visibility between none and inline 
     if ((document.getElementById(itemID).style.display == 'none')) 
     { 
     document.getElementById(itemID).style.display = 'inline'; 
     } else { 
     document.getElementById(itemID).style.display = 'none'; 
     } 
    } 

     </script> 
    </header> 
    <body> 

    <!-- header --> 
    <table border="0" width="550" height="25"> 
     <tr> 
      <td> 
      <div style="font-family:Calibri, Arial; font-size:15pt"> 
      Passive Talents 
      </div> 
      </td> 
     </tr>  
    </table> 

    <!-- Passive Talent loop --> 
     <xsl:for-each select="Talents_Passive"> 
     <xsl:variable name="i" select="position()"/> 
     <div style="font-family:Calibri, Arial; font-size:5pt"> 
     <xsl:if test="Talent != ''"> 
      <table border="0" width="550"> 

       <tr> 
        <td bgcolor="#A0A0A0" width="80%"> 
         <a href="#" onClick="toggle_it('{$i}')"> <b id="toggle"><xsl:value-of select="Talent"/></b></a></td> 
        <td bgcolor="#A0A0A0" width="20%" align="center"> 
         <xsl:value-of select="Talent_Cost"/><xsl:text> - </xsl:text><xsl:value-of select="Talent_Type"/></td> 
       </tr> 

       <xsl:if test="Prerequisite != ''"> 
       <tr> 
        <td colspan="2" bgcolor="#C0C0C0"><b>Prerequisite: </b><xsl:value-of select="Prerequisite"/></td> 
       </tr> 
       </xsl:if> 

       <tr> 
        <td colspan="2" bgcolor="#C0C0C0" id="{$i}" style="display:inline;"> 
        <xsl:if test="Action != ''"> 
         <b>Action: </b><xsl:value-of select="Action"/> 
        </xsl:if> 
        <xsl:if test="Range != ''"> 
         <xsl:text> </xsl:text> <b>Range: </b><xsl:value-of select="Range"/> 
        </xsl:if> 
        <xsl:if test="Cost != ''"> 
         <xsl:text> </xsl:text> <b>Cost: </b><xsl:value-of select="Cost"/> 
        </xsl:if> 
        </td> 
       </tr> 

       <xsl:if test="Action != ''"> 
       <tr> 
        <td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Action: </b><xsl:value-of select="Action"/></td> 
       </tr> 
       </xsl:if> 

       <xsl:if test="Range != ''"> 
       <tr> 
        <td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Range: </b><xsl:value-of select="Range"/></td> 
       </tr> 
       </xsl:if> 

       <xsl:if test="Cost != ''"> 
       <tr> 
        <td colspan="2" bgcolor="#E0E0E0" id="{$i}" style="display:none;"><b>Cost: </b><xsl:value-of select="Cost"/></td> 
       </tr> 
       </xsl:if> 

       <xsl:if test="Description != ''"> 
       <tr> 
        <td colspan="2" bgcolor="#EBEBEB"><b>Description: </b><xsl:value-of select="Description"/></td> 
       </tr> 
       </xsl:if> 

      </table> 
     </xsl:if> 
     </div> 
    </xsl:for-each> 
    </body> 
    </html> 
    </xsl:template> 
    </xsl:stylesheet>

目前發生的事情是THRID行時onClick事件被付諸行動，但行四，五和六不顯示隱藏......

有效我要排兩次與行交換plaes四，五和六..任何幫助將不勝感激。

我覺得這是我的煩惱的原因...

<script> 
       <!-- insert toggling here --> 


      function toggle_it(itemID){ 
      // Toggle visibility between none and inline 
      if ((document.getElementById(itemID).style.display == 'none')) 
      { 
      document.getElementById(itemID).style.display = 'inline'; 
      } else { 
      document.getElementById(itemID).style.display = 'none'; 
      } 
     } 

      </script>

，但我不明白，爲什麼它不會像撥動我計劃。

來源

2013-04-23 HurkNburkS

問題是，您在生成的html中沒有唯一的id。

您必須爲每個ID添加前綴。例如：

<td colspan="2" bgcolor="#C0C0C0" id="action_{$i}" style="display:inline;"> 
<td colspan="2" bgcolor="#E0E0E0" id="x_{$i}" style="display:none;"> 
<td colspan="2" bgcolor="#E0E0E0" id="y_{$i}" style="display:none;"> 
<td colspan="2" bgcolor="#E0E0E0" id="z_{$i}" style="display:none;">

，改變你的JavaScript函數是這樣的：

function toggle_it_withId(itemID){ 
    // Toggle visibility between none and inline 
     if ((document.getElementById(itemID).style.display == 'none')) 
     { 
     document.getElementById(itemID).style.display = 'inline'; 
     } else { 
     document.getElementById(itemID).style.display = 'none'; 
     } 
    } 

    function toggle_it(id_nr) 
    { 
     toggle_it_withId("action_" + id_nr); 
     toggle_it_withId("x_" +id_nr); 
     toggle_it_withId("y_" +id_nr); 
     toggle_it_withId("z_" +id_nr); 
     }

但是，這可能會更與jQuery slectors容易

更新（一個posibility）如何做到這一點蒙山jQuery的：

添加一個唯一的id給你的天賦表。

<table border="0" width="550" id="talenttable_{id}" >

將類屬性添加到您想要切換的行。像隱藏的細節和開放的概述。

<td colspan="2" bgcolor="#C0C0C0" class="overview" style="display:inline;"> 
<td colspan="2" bgcolor="#E0E0E0" class="details" style="display:none;">

更改您的切換功能，以類似：

function toggle_it(id_nr) 
{ 
    $('#talenttable_'+ id_nr + ' .details').toggle(); 
    $('#talenttable_'+ id_nr + ' .overview').toggle(); 
    }

可選您還可以擺脫BGCOLOR和樣式屬性，並把這個信息到類。

來源

2013-04-23 09:36:23

merp ..試圖讓這個工作，但dosnt似乎是..我怎麼定義我的點擊事件？...我只想使用一個點擊事件..是可能的.. ..我真的沒有得到第二個功能。 – HurkNburkS 2013-04-23 09:51:26

選擇器如何工作？.. – HurkNburkS 2013-04-23 09:53:19

onclick處理程序應該保持原樣：'onClick =「toggle_it（'{$ i}'）」> – 2013-04-23 09:55:50

如何切換表格行開關

回答

相關問題