Question

我有一张桌子，想在td点击时切换td内容。就像手风琴一样。我试过这段代码但没用。

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

    });

我怎么能解决这个问题。

以下是将在td中包含大文本的HTML代码。我想在td click上显示/隐藏此内容。

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

Answer 1

单击td时使用find选择器查找p

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

<强> DEMO

或使用align属性

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

<强> DEMO

Answer 2

正如评论中所提到的，你不应该隐藏td，而是隐藏它的内容。此外，如果每行都有一个具有相同ID的td，则可能会产生问题。尝试用类代替它：

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

    });

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

如果这不是您想要的，您应该提供您的HTML代码，以便我们知道您真正想要获得的内容。

在jquery中显示和隐藏td

2 个答案: