Question

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

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

我希望能够点击4个单元格中的任何一个，隐藏所有4个单元格的内容，并用基于单击单元格的新内容替换它们。

我可以通过为每个都在第二个表行中的3个单元格来使用它（使用show和hide方法），通过为它们分配相同的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>

Answer 1

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

您可以将表格放入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>

Answer 2

不确定这是否正是您正在寻找的（并且它不能像<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();
            });
        });
    });

用jQuery隐藏表元素

2 个答案: