使用 jQuery 隐藏表格元素答案

【问题标题】：Hiding Table elements with jQuery使用 jQuery 隐藏表格元素
【发布时间】：2013-06-06 20:12:29
【问题描述】：

我有一个 2 行表 - 第一行是单列，第二行是 3 列。

4 个“表格单元格”中的每一个都有一个图形和一个标题，并被分配了相同的类

我希望能够单击 4 个单元格中的任何一个，隐藏所有 4 个单元格的内容，并根据单击的单元格将它们替换为新内容。

我可以让它工作（使用 show 和 hide 方法）都在第二个表格行中的 3 个单元格，通过为每个单元格分配相同的 td 类，但不知道如何制作单个顶行单元格可单击以隐藏底部 3 个单元格，或单击底部 3 个单元格中的任何一个并隐藏顶行单元格以及第二行中的其他 2 个单元格。

有没有简单的方法用 jQuery 做到这一点？

使用代码更新

很抱歉没有发布代码。在这方面我是全新的，到目前为止才知道，但现在明白你为什么想看它了...:-)

这是我目前所拥有的。提前感谢您的帮助。

$(document).ready(function () {
    $('.box').hide().filter('.top').show();
    $('.box h1').click(function () {
        $(this).hide();
        $(this).parent().siblings().hide();
        $(this).siblings().show().last();
        $(this).siblings('a.up-link').click(function () {
            $(this).siblings().hide().filter('h1').show();
            $(this).parent().siblings(':not(h1)').show();
            $(this).remove();
        });
    });
});

<table width="100%" border="0" cellpadding="0">
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 1
        </p>
        </h1>
        <div class="box">
            <h1>Answer 1</h1>
        </div>
    </td>
</tr>
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 2
        </p>
        </h1>
        <div class="box">
            <h1>Answer 2</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 3
        </p>
        </h1>
        <div class="box">
            <h1>Answer 3</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 4
        </p>
        </h1>
        <div class="box">
            <h1>Answer 4</h1>
        </div>
    </td>
</tr>
</table>

【问题讨论】：

你的 HTML 是什么？展示我们总是比描述我们更好。
你必须向我们展示你尝试了什么
听起来您已经在代码上取得了一些进展，不要犹豫，发布它，我们都乐于提供帮助！
小伙伴们，等他更新代码吧，别贸然投票给他！！
@DontVoteMeDown 感谢您对新手的支持...:-)

标签： jquery

【解决方案1】：

不确定这是否正是您要查找的内容（并且它不像您使用 <div> 结构的其他问题的答案那样可嵌套），但以下内容将使您的主题可点击并显示其相关答案同时隐藏其他主题。此外，可以点击答案返回并再次显示所有主题：

$(document).ready(function () {
        $('td > :not(h1)').hide(); //hide the immediate children that aren't h1 of each td
        $('td > h1').click(function () { //make the immediate h1 child of the td (aka the Topic) clickable
            $('td > h1').hide(); //hide the topic when clicked
            $(this).next('div.box').show().off('click').click(function () { //show the answer box, unbind any previous click handler, add click handler that will reset it back to the way it was
                $(this).hide();
                $('td > h1').show();
            });
        });
    });

【讨论】：

谢谢。早上会试试。当您说它不可嵌套时，您的意思是它只能下降一个级别（与我们使用另一种方法的多个级别相反）？如果没有，有没有办法将这两种方法结合起来？
正确，它只在一个级别上运行。除非您打算在表格单元格中嵌套表格（通常不推荐），否则组合这些方法可能有点棘手。
谢谢。将不得不重新考虑我们的事情，因为我们确实需要多个层次。好消息是，在您的 2 个答案（以及随附的教育）之间，我有很多选择可以使用。真的不能感谢你。

【解决方案2】：

这只是一种方法，但却是一种强大的方法。

你可以把表格放到一个DIV中，然后用jQuery的.html()方法把整个Div替换成新的内容。

这里是a working jsFiddle

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#theTable td').click(function() {
                    var i = $(this).attr('id');

                    if (i == 'r1c3'){
                        $('#theDiv').html('<table id="theTable"><tr><td>Just one cell in this table</td></tr></table>');
                    }else{
                        alert('You clicked: [' + i + ']. Try clicking Row 1 Cell 3');
                    }

                });


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="theDiv">
        <table id="theTable">
            <tr>
                <td id="r1c1">Row 1, Cell 1</td>
                <td id="r1c2">Row 1, Cell 2</td>
                <td id="r1c3">Row 1, Cell 3</td>
            </tr>
            <tr>
                <td id="r2c1">Row Two, Cell 1</td>
                <td id="r2c2">Row Two, Cell 2</td>
                <td id="r2c3">Row Two, Cell 3</td>
            </tr>
        </table>

    </div>


</body>
</html>

【讨论】：

抱歉，我没有很好地解释这一点，我是 jQuery 新手。当我单击时，我希望隐藏所有其他单元格（以及我单击的那个）并将其替换为我的 html 中的内容，而不是弹出警报。这有意义吗？
好的。我明白了一半......当你真正阅读你放在警告框中的内容时，它真的很有帮助...... :-) 我是否正确地假设我会调整并重复相同的“if语句并删除警告语句以让它与每个盒子一起工作，或者有没有办法组合这些语句？再次感谢您的帮助。
@tymeJV 我发布了请求的代码，但没有收到任何人的回复。我不知道如何使我收到的答案（在发布代码之前）适应我正在使用的内容。你能帮我吗？提前感谢您提供的任何帮助。在这方面还是新的..:-)