在 jquery 中显示和隐藏 td

Show and hide a td in jquery

本文关键字：隐藏 td 显示 jquery 更新时间：2023-09-26

我有一个表格，想在点击 td 时切换 td 内容。就像手风琴一样。我已经尝试过这段代码，但没有用。

$('#table tr').each(function(){
        $(this).on("click", "#largeTd", function(){
            //$(this).toggle();
            //$('#largeTd:eq(' + index + ')',this).toggle();
        });
    });

我怎么能解决这个问题。

下面是 HTML 代码，它将在 td 中具有大文本。我想在点击时显示/隐藏此内容。

<table>
<tbody>                      
   <tr>
    <td align="">
                Text
                        </td>
                        <td class="largeTd">
                            <p> 
                                    large Text                                      
                                    <br>
                                    large Text
                                    <br>
                            </p>
                        </td>                                                                          
                    </tr>                                               
                    <tr>
                        <td align="">
                            Text4
                        </td>
                        <td class="largeTd">
                            <p> 
                                    large Text
                                    <br>
                                    large Text
                                    <br>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>

如评论中所述，您不应该隐藏 td，而是隐藏它的内容。此外，如果每行都有一个具有相同 id 的 td，则可能会产生问题。尝试将其替换为类：

$('#table tr').each(function(){
        $(this).on("click", ".largeTd>p", function(){
            $(this).toggle();
            //$('#largeTd:eq(' + index + ')',this).toggle();
        });
    });

我已经更新了您的代码，假装您将 largeTd 中的内容放在 <p> 标签内，并将每个id="largeTd"替换为 class="largeTd" .

如果这不是您想要的，您应该向我们提供您的 html 代码，以便我们知道您真正想要获得什么。

单击TD时使用查找选择器查找P

$('table tr td').click(function(){
        $("p",this).toggle();
 });

演示

或使用对齐属性

$('table tr td[align]').click(function(){
        $(this).next("td").find("p").toggle();
 });

演示