一次只显示一个隐藏表格行

我有一个表格，其中每个第二个表格行的类名都是“hideme”。在我的css文件中，我做了.hideme {display：none}一次只显示一个隐藏表格行

隐藏行包含有关它上面的行的选项/信息。我的目标是当点击上面的行时，使用jquery切换隐藏行的开启/关闭。我已经成功了，但代码有一个缺陷。我可以同时显示多个隐藏行。这是不可取的。我想在任何时候只显示一个隐藏的行，或者根本没有。

我应该如何更改我的jQuery代码以使我的表像我想要的那样工作？

这是我的jQuery代码：

$(document).ready(function() { 

$('#eventtable tr').click(function() { 
    $(this).closest("tr").next().toggle(); 
}); 
});

我的HTML/PHP如下：

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { 

     echo ' 
      <tbody> 
       <tr> 
        <td>' . $row['event'] . '</td> 
        <td>' . $row['dr'] . '</td> 
       </tr> 
       <tr class = "hideme"> 
        <form method="post" action="galleryHandler.php"> 
        <input type="hidden" name="Name" value="' . $row['name'] . '" />  
        <td><input type="password" class="input" name="password" size="25" maxlength="20"/></td> 
        <td><input type="submit" name="submit" value="Se fotosession" class="button2"/></td> 
        </form>   
       </tr> 
      </tbody> 
     '; 

    }

的问题已通过一种计算器用户解决。然而，我仍然有一个问题，因为我有隐藏行中的文本字段，我一开始没有提到它，当我对它们进行clikc时，它们就会消失。

来源

2013-04-05 Zahrec

发表您的HTML太.. – bipen 2013-04-05 09:34:33

这将这样的伎俩：

$(document).ready(function() { 
    $('#eventtable tr:even').on('click', function() { 
     if ($(this).next().css('display') == 'none') { 
      $('#eventtable .hideme').hide(); 
      $(this).next().show(); 
     } 
     else { 
      $('#eventtable .hideme').hide(); 
     } 
    }); 
});

在这里工作：

http://jsfiddle.net/aTN6v/

这将使切换行为，我们的工作，但将关闭哪一个已经打开打开一个你之前点击了。

来源

2013-04-05 10:05:49

非常感谢你。奇迹般有效！发现我还需要更新版本的jquery。 – Zahrec 2013-04-05 10:31:07

Ups ...我在隐藏行中有一个文本框。当我点击它来输入一些文本时，隐藏的行再次消失。我该怎么办？ – Zahrec 2013-04-05 10:42:56

刚刚编辑过将'：even'添加到事件处理程序的初始选择器中，因此只有通常可见的行响应点击。 – 2013-04-05 13:04:06

试试这个：前

$(document).ready(function() { 

    $('#eventtable > tbody > tr > td').click(function() { 
     $(this).closest("tr").next().toggle(); 
    }); 
});

来源

2013-04-05 09:33:54

隐藏所有其他人：

$('#eventtable tr:even').hide();

来源

2013-04-05 09:37:29 user2248427

$(document).ready(function() { 

$('#eventtable tr').click(function() { 
    var nextRow = $(this).closest("tr").next(); 
    $('#eventtable tr.hideme').not(nextRow).hide(); 
    nextRow.toggle(); 
}); 
});

来源

2013-04-05 09:45:13

假设HTML在下面的结构

<table border="1"> 
    <tr><td>1.a</td><td>foo</td></tr> 
    <tr class="hideme"><td>1.b</td><td>foo</td></tr> 
    <tr><td>2.a</td><td>bar</td></tr> 
    <tr class="hideme"><td>2.b</td><td>bar</td></tr> 
    <tr><td>3.a</td><td>baz</td></tr> 
    <tr class="hideme"><td>3.b</td><td>baz</td></tr> 
</table>

一ND与CSS如下

.hideme { display:none; }

以下JS代码应该做的伎俩

$('tr:even').click(function(){ 
    $(this).next().toggleClass('hideme'); 
});

检查工作小提琴here。

来源

2013-04-05 09:54:26

一次只显示一个隐藏表格行

回答

相关问题