0

我的问题很简单。我想一次只显示一个 tr 的内容。这意味着当我单击另一个 tr 时，另一个打开的 tr 应该关闭。

我的代码如下

<head>

    <style>
      p { width:400px; }
      .click{cursor:pointer;}
    </style>


    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function visibility(id) {

        var e = document.getElementById(id);
        if(e.style.display == 'none')
          e.style.display = 'block';
        else
          e.style.display = 'none';
    }
    </script>
</head>

上面是 onClick 调用可见性函数的头部部分。在正文部分下面，我尝试使用 for 循环显示两个 tr。

<body>
<table>
<?php
$i=2;
for($i = 1; $i <= 2; $i++)
{
?>
    <tr class="click <?php echo $i; ?>" onClick="visibility('<?php echo $i; ?>');">
        <td>Click <?php echo $i; ?></td>
    </tr>
    <tr id="<?php echo $i; ?>" style="display:none;">
        <td>This is a paragraph <?php echo $i; ?></td>
    </tr>
<?php
}
?>
</table>
</body>

我无法得到想要的结果（这意味着一次只能看到一个 tr ）。有许多现有的 Jquery 插件可用，但我不想使用它们，因为它会增加我的网页上的负载，并且需要进行大量自定义。我快完成了，希望在大家的帮助下得到理想的结果。提前致谢

4

4 回答 4

2

将处理程序绑定click到您的tr.click元素，显示相应的内容，并隐藏其他内容：

$(this).next('tr').show().siblings().not('tr.click').hide();

这是一个小提琴

于 2013-05-07T08:40:16.460 回答
0

首先为所有 td 设置类名“test”

然后使用此代码

$(".test").click(function(){

$(".test").hide(); $(this).show();

});

于 2013-05-10T09:37:32.977 回答
0

table-row显示“tr”元素时需要将显示设置为值。让我们使用jQuery。

 $(document).on('click', '.clickablerows', function() {
     $('.showablerows').css('display','none');
     var showee = $(this).data('showee');
     $(showee).css('display','table-row');
     return false;
 });
于 2013-05-07T08:31:34.820 回答
0

我会添加/删除一个类并通过它处理可见性状态，这样您就可以更好地控制活动/非活动元素发生的事情（另外，您不必关心兄弟姐妹之一是否是单击的元素）。您还可以使用事件委托.on()来节省附加事件处理程序的时间。

jsfiddle

JS

var activeClass = 'active';

$('table').on('click', '.click', function() {
   $(this).next().addClass(activeClass).siblings().removeClass(activeClass);
});

CSS

td {
    display: none;
}

.active td {
    display: table-cell;
}
于 2013-05-07T08:49:05.253 回答