0

我有一个表，其中每隔一个表行都有一个类名“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用户解决了。但是我仍然有一个问题，因为我在隐藏行中有文本字段，我一开始没有提到，当我点击它们时它们消失了。

4

5 回答 5

1

隐藏所有其他之前：

$('#eventtable tr:even').hide();
于 2013-04-05T09:37:29.817 回答
1

这可以解决问题：

$(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-05T10:05:49.080 回答
0

试试这个：

$(document).ready(function () {

    $('#eventtable > tbody > tr > td').click(function () {
        $(this).closest("tr").next().toggle();
    });
});
于 2013-04-05T09:33:54.463 回答
0 
$(document).ready(function() {

$('#eventtable tr').click(function() {
    var nextRow = $(this).closest("tr").next();
    $('#eventtable tr.hideme').not(nextRow).hide(); 
    nextRow.toggle();
});
});
于 2013-04-05T09:45:13.527 回答
0

假设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');
});

在这里检查工作小提琴。

于 2013-04-05T09:54:26.107 回答