如何使用jQuery实现点击表格行时切换+/-符号

我帮你排查出了代码里的几个关键问题，咱们一步步修正：

问题原因 #

• 重复ID违反HTML规则：你给多行的符号元素用了同一个id="expand"，给第一列单元格用了同一个id="x"。HTML中ID必须是唯一标识，这会导致jQuery只能选中第一个匹配的元素，其他行的点击事件和符号切换都无法正常工作。
• 全局选择器导致错误操作：原来的代码中，点击事件里用$("#expand")会操作页面中第一个该ID的元素，而不是你当前点击的那一行的符号，所以切换逻辑完全不对。
• CSS设置语法错误：$("#expand").css("style" , "font-size:30px")是错误的写法，应该直接设置具体的CSS属性，不过更合理的是把样式写到CSS里，避免重复操作。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="gwt:property" content="locale=en_US">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        tr.even { background-color: #FFFFFF; }
        tr.odd { background-color: #EEEEEE; }
        .xhide { display: none; } /* 直接默认隐藏，不用JS再执行hide() */
        .expand b { font-size:30px; } /* 把符号样式写到CSS里，简化JS逻辑 */
    </style>
</head>
<body>
    <hr>
    <table>
        <tbody>
            <tr>
                <td width="5%"></td>
                <td>
                    <table border="1" cellpadding="5" cellspacing="0">
                        <thead>
                            <tr style="font-size:16px; background-color:lightgray;">
                                <th><a name="table">&nbsp;</a>Column1</th>
                                <th>Column2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="odd">
                                <!-- 把重复的id替换为class，符合HTML规则 -->
                                <td class="toggle-cell"><span class="expand"><b>+</b></span> Country</td>
                                <td>
                                    <p>India</p>
                                    <p class="xhide">Europe</p>
                                    <p class="xhide">Asia</p>
                                    <p class="xhide">Russia</p>
                                </td>
                            </tr>
                            <tr class="odd">
                                <td class="toggle-cell"><span class="expand"><b>+</b></span> Country</td>
                                <td>
                                    <p>India</p>
                                    <p class="xhide">Europe</p>
                                    <p class="xhide">Asia</p>
                                    <p class="xhide">Russia</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td width="5%"></td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function(){
            // 绑定点击事件到class为toggle-cell的单元格，点击整个单元格都能触发
            $(".toggle-cell").click(function(){
                // 只操作当前点击行的隐藏内容，避免所有行同时展开/折叠
                const $currentRowXhide = $(this).closest("tr").find(".xhide");
                $currentRowXhide.toggle(300);
                
                // 获取当前单元格里的符号元素，只修改这一个符号
                const $expandSymbol = $(this).find(".expand b");
                // 切换+/-符号
                if($expandSymbol.text() === "-"){
                    $expandSymbol.text("+");
                } else {
                    $expandSymbol.text("-");
                }
            });
        });
    </script>
</body>
</html>

关键修改点说明 #

1. 替换重复ID为Class：将id="expand"改为class="expand"，id="x"改为class="toggle-cell"，确保每个元素的标识唯一，符合HTML规范。
2. 精准操作当前行元素：用$(this).closest("tr").find(".xhide")定位到当前点击行的隐藏内容，解决了原来点击一行所有行都展开的问题。
3. 切换当前行的符号：用$(this).find(".expand b")获取当前点击单元格里的符号元素，只修改这一个符号的内容，实现了每行独立的符号切换。
4. 优化CSS和初始化：直接在CSS里设置.xhide默认隐藏，把符号的字体大小写到CSS里，简化了JS逻辑，让代码更易维护。

内容的提问来源于stack exchange，提问作者Deepika Bansal