Question

我正在切换表格行，但是只有第一个条目是可点击的，当点击它时，我的所有表格中的每一行都被隐藏了。

我想帮助弄清楚如何制作它，以便在单击每个表的文本时，只有表格行受影响。不是循环中的每个表。

这就是我的代码看起来像

<?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>

任何帮助将不胜感激。

Answer 1

使用以下功能：

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

注意：这将为一行内的每个b-tag添加一个处理程序。单击该标记后，父行将切换。

但是，我不明白你为什么要切换它。自从它第一次被隐藏起来以来，你无法再次切换它（它被隐藏所以不再可点击了）

编辑 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/

切换表行但每个表行都受到一个id的影响

1 个答案: