切换表行，但每个表行都受一个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();                
   });
});

注意:这将为行内的每个b标签添加一个处理程序。在单击该标记时，父行被切换。

然而，我不明白为什么你想要它切换。自从它第一次被隐藏，你就没有办法再切换它了(它被隐藏了，所以不能再点击了)

EDIT OP希望表的第一行切换其余行:

$(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/

相关内容

最新更新

热门标签：