Question

我有一个表，其中每个第二个表行的类名称为“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>
        ';

    }

问题已由一种stackoverflow用户解决。但是我仍然有一个问题，因为我在隐藏的行中有文本字段，我最初没有提到它们，当我对它们进行clikc时它们会消失。

Answer 1

之前隐藏所有其他人：

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

Answer 2

试试这个：

$(document).ready(function () {

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

Answer 3

$(document).ready(function() {

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

Answer 4

假设以下结构中的 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>

并使用 CSS ，如下所示

.hideme { display:none; }

以下 JS代码应该做的伎俩

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

检查工作小提琴here。

Answer 5

这样可以解决问题：

$(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/

这将使切换行为起作用，但会在打开您点击的行为之前关闭已经打开的行为。

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

5 个答案: