使用jQuery隐藏表元素

我有一个两行的表格——第一行是一列，第二行是三列

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

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

我可以（使用show和hide方法）为第二个表格行中的3个单元格分配相同的td类，使其工作（使用show和hide方法），但不知道如何使顶部的单个单元格可单击，以便隐藏底部的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>

$（文档）.ready（函数（）{
$（'.box'）.hide（）.filter（'.top'）.show（）；
$（'.box h1'）。单击（函数（）{
$（this.hide（）；
$（this.parent（）.sides（）.hide（）；
$（this）.sides（）.show（）.last（）；
$（this）。同级（'a.up-link'）。单击（函数（）{
$（this.sibbins（）.hide（）.filter（'h1'）.show（）；
$（this）.parent（）同级（':not（h1）'）.show（）；
$（this.remove（）；
});
});
});

专题1

答复1

专题2

答复2

专题3

答复3

专题4

答复4

这只是一种方法，但功能强大

您可以将表放入一个DIV中，然后使用jQuery的

.html（）

方法将整个DIV替换为新内容

这是

表，tr，td{边框：1px纯绿色；边框折叠：折叠；填充：5px 5px；}
$（文档）.ready（函数（）{
$（'#表td'）。单击（函数（）{
var i=$（this.attr（'id'）；
如果（i='r1c3'）{
$（'#theDiv'）.html（'此表中只有一个单元格'）；
}否则{
警报（“您单击了：['+i+']。请尝试单击第1行第3单元格”）；
}
});
}); //END$（document.ready（））
第1行，第1单元
第1行第2单元
第1行第3单元
第二排，第一单元
第二排，第二单元
第二排第三单元

不确定这是否正是您要查找的内容（并且它不能像其他问题的答案那样用

结构嵌套），但以下内容将使您的主题可单击并显示其关联的答案，同时隐藏其他主题。此外，还可以单击答案返回并再次显示所有主题：

$(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();
            });
        });
    });

---

你的HTML是什么？向我们展示总是比在我们面前描述好。你必须向我们展示你尝试了什么。听起来好像你在代码方面已经取得了一些进展，不要犹豫发布它，我们都很乐意提供帮助！伙计们，等待他的代码更新，不要草率地否决他@DontVoteMeDown谢谢你为这个新手挺身而出…：-）我很抱歉没有解释清楚，我是jQuery的新手。当我单击时，我希望所有其他单元格（以及我单击的单元格）都被隐藏并替换为html中的内容，而不是弹出警报。这有意义吗？好的。我有一半明白了。。。当你真正阅读你放在警告框中的内容时，它真的很有帮助…：-）我假设我会调整并重复同样的动作，对吗“if语句并删除alert语句以使其与每个框一起工作，或者是否有方法组合这些语句？再次感谢您的帮助。@tymeJV我发布了请求的代码，但没有收到任何人的回复。我不知道如何将我收到的答案（在发布代码之前）与我的工作内容相适应。你能帮忙吗？提前感谢您提供的任何帮助。这方面还是新的…-）谢谢。明天早上我会试试的。当你说它不可嵌套时，你的意思是它只能下降一个级别（与我们使用另一种方法时的多个级别相反）？如果没有，是否有办法将这两种方法结合起来？正确，它只在一个级别上运行。除非您打算用表内单元格嵌套表（通常不推荐），否则组合这些方法可能有点棘手。谢谢。我们需要重新思考我们的问题，因为我们确实需要多个层次。好消息是，在你的两个答案（以及附带的教育）之间，我有很多选择。真是太感谢你了。

$(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();
            });
        });
    });