2013-04-21 3 views
0

현재 테이블 행을 토글하고 있지만 첫 번째 항목 만 클릭 할 수 있으며 클릭하면 모든 테이블의 모든 행이 숨겨집니다.테이블 행을 전환하지만 모든 테이블 행은 하나의 ID에서 영향을받습니다

나는 각 테이블의 텍스트를 클릭 할 때 그 테이블 행이 영향을 받도록 만드는 방법을 알아내는 데 도움이 필요합니다. 루프의 모든 테이블이 아닙니다.

이 어떤 도움을 크게 감상 할 수

<?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="/Catalogue"> 
    <html> 
    <header> 
     <script type ="text/javascript" src="jquery.js" ></script> 
     <script> 
      $(function() { 
      $('#toggle').click(function() { 
      $('td:nth-last-child(-n + 1):nth-child(3n + 1)').toggle();     
     }); 
    }); 
    </script> 


    </header> 
    <body> 
     <xsl:for-each select="Talents"> 
     <xsl:if test="Talent != ''"> 
      <table border="0" width="550"> 
       <tr> 
        <td bgcolor="#A0A0A0" width="80%"> 

        <b id="toggle"><xsl:value-of select="Talent"/></b></td> 

        <td bgcolor="#A0A0A0" width="20%" align="center"><xsl:value-of select="Cost"/> 
        <xsl:text> - </xsl:text> 
        <xsl:value-of select="Type"/></td> 
       </tr> 

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

       <xsl:if test="Action != ''"> 
       <tr id="rowToClick" style="display:none"> 
        <td colspan="2" bgcolor="#E0E0E0"><xsl:value-of select="Action"/></td> 
        </tr> 
       </xsl:if> 

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

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

처럼 내 코드는 모습입니다.

$(function() { 
     $('table tr b').click(function() { 
      $(this).parent().parent().toggle();     
    }); 
}); 

참고 :

+0

_so 각 테이블의 텍스트를 클릭하면 _ .. 여러 개의 표가 있습니까? –

+0

그래, 거기에 약 80 테이블이 있습니다. – HurkNburkS

답변

1

는 다음과 같은 기능을 사용하여이 행 내부의 모든 B-태그에 핸들러를 추가합니다. 해당 태그를 클릭하면 상위 행이 토글됩니다.

그러나 내가 왜 토글해야하는지 이해하지 못합니다.

$(function() { 
      $('table tr').not(":first-child").hide(); // hides the other rows on page load 
      $('table tr:first-child').click(function() { 
       $(this).siblings().toggle();     
     }); 
    }); 
:이 숨겨져 처음부터, 당신이 다시 전환 할 수있는 방법은

편집 영업 이익은 행의 나머지 부분을 전환하기 위해 테이블의 첫 번째 행을 원한다 (그렇게하지 클릭 더 이상 숨겨진)이 없다

이 피들에 반영됨 : http://jsfiddle.net/Kennethtruyers/g52xk/6/

+0

좋아, 내가 실수했다 ** ** 일부 오래된 코드에서 .. 그래서 effectivly 나는 행을 필요로 시작할 때 숨겨져있을 때 부모 행을 클릭하면 hiddle 행을 표시해야합니다. 다시 클릭하면 다시 표시됩니다. – HurkNburkS

+0

"부모"란 무엇을 의미합니까? 코드 행의 상위 하위 관계가 없습니다. 다음 행을 의미합니까? – Kenneth

+0

죄송합니다. 그래서 각 테이블의 첫 번째 행을 표시하고 숨길 수 있도록해야합니다. 지금은 첫 번째 테이블의 첫 행을 사용하여 모든 테이블 행을 숨기거나 표시 할 수 있습니다 .... 정말 이상합니다. – HurkNburkS

관련 문제