Question

我目前有一个有2行的表。

第1行有图像，第2行被隐藏。

使用JQuery我需要显示这个隐藏的行。

这是表格：

<table>
<tr>
    <td><img src="/default.png" alt="" /></td>
</tr>

<tr style="display:none">
    <td><img src="/default2.png" alt="" /></td>
</tr>
</table>

Answer 1

$("td").on("click", "img", function(){
    $("tr:hidden").show();
});

谁会猜到？

Answer 2

首先，将Id或类放入行中，以便您可以引用它们。

<table>
<tr>
    <td><img src="/default.png" alt="" class="trigger"/></td>
</tr>

<tr style="display:none" id="target">
    <td><img src="/default2.png" alt="" /></td>
</tr>
</table>

然后，使用jQuery向事件添加事件侦听器函数：

<script>
  $(".trigger").click( function(){ $("#target").show(); } );
</script>

正如您所看到的，trigger是一个类，您使用点来表示jQuery：.trigger，而target是Id，您必须使用＃： #target。

你可以有多个具有相同类的元素，但（据说）只有一个具有任何给定Id的元素。

在我的例子中，你可以有几个触发事件的图像和一个目标div。

Answer 3

如果它总是第二，你可以使用：

$('table tr:nth-child(2)').show();

如果您只有一个且不知道索引：

$("tr").each(function(ele){
   $(this).show();
});

Answer 4

有数百万种变种：）

$("tr").not(':hidden').find('img').click( function(){
  $(this).parent().siblings().show();
});

Answer 5

为显示隐藏行的图像指定一个点击处理程序。

示例：

<style type="text/css">
.hide {
    display: none;
}
</style>

<script type="text/javascript">
$('td img').click(function() {
    $('tr:hidden').show();
});
</script>

<table>
    <tr>
        <td><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="Google" /></td>
    </tr>
    <tr class="hide">
        <td>You clicked on the image!</td>
    </tr>
</table>

JQuery Onclick图像显示隐藏的表格行

5 个答案: