单击动态表的标题，淡出内容行

Question

我对 jquery 和动态表有疑问。我想要单击表标题以使所有行（而不是标题）淡出。不幸的是我不知道如何选择行。到目前为止，我只找到了示例，其中它们具有固定的行数，因此具有固定的 ID 或类。但正如我所说，就我而言，可能有任意数量的行。

我想我需要类似 $(this).tr.effect(...) 的东西。 我知道我可以尝试用 Javascript 找出所有行的 ID，然后将它们淡出。但这似乎是解决该问题的过于复杂的方法。有人知道淡出行的简单方法吗？

编辑： 抱歉，我想我没有说清楚（我再试一次:)）。我说：“我有一个动态表。”但我的意思是：我在一页上有动态表格，因此不止一个标题。像这样的东西（伪代码）：

 <table class="MyTable">
   <header class="myHeader"/>
   <rows />
 </table>

 <table class="MyTable">
   <header class="myHeader"/>
   <rows />
 </table>

 <table class="MyTable">
   <header class="myHeader"/>
   <rows/>
 </table>

所有这些都是自动生成的。所以我不知道有多少个（当然我可以用javascript算出来或者把它写在隐藏字段中）。这就是为什么我无法使用 $("#myTable") 选择 ID 的原因。因为#myTable 不只一个。我的新方法是将我想要隐藏的行的 ID 编码到标头 ID 中，然后使用 $(".myHeader") 选择标头类。之后我可以解码 header-ID 并隐藏行。

我不确定这是否是一个明智的解决方案。那么也许有人有更好的？ （我希望你们明白我想要做什么；））

我想问的是：

最聪明的代码是什么：

$(document).ready(function () {
    $(".myHeader").click(function () {
          //I try to hide the rows of the clicked header.
    });
});

Answer 1

最好的方法是将标题包装在 中，将行包装在 中，然后您可以使用以下代码：

$myTable = $("#myTable");

$("thead > tr", $myTable).click(function() {
    $("tbody > tr", $myTable).fadeOut();
});

但是如果您不想使用对于他们，此代码将起作用（假设只有第一行是标题行）：

$myTable2 = $("#myTable2");
$("tr:eq(0)", $myTable2).click(function() {
    $("tr:gt(0)", $myTable2).fadeOut();
});

示例： http://jsfiddle.net/Wxa3W/1/

编辑：

更新问题的更新答案。

Html：

<table class="MyTable">
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    </tbody>
</table>

JavaScript：

$(function() {    
    $(".MyTable > thead > tr").click(function() {
        $(this).closest(".MyTable").find("tbody > tr").fadeOut();
    });
});

如果您不想要 thead/tbody：

Html：

<table class="myTable">
    <tr class="myHeader"><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>

JavaScript：

$(function() {    
    $(".myTable .myHeader").click(function() {
        $(this).closest(".myTable").find("tr:not(.myHeader)").fadeOut();
    });
});

示例： http://jsfiddle.net/Wxa3W/2/

Answer 2

如果我误解了，请原谅，但是你就不能做这样的事情吗？

$("#table tr").hide();

Answer 3

您可以扭曲桌体。 （包裹你想要隐藏的内容。）

<tbody id="table-body">
    <tr></tr>
</tbody>

然后用jquery选择#table-body。

Answer 4

如果将标题行放在 元素中，并将表格正文放在 元素中，则可以使用以下内容jQuery达到了预期的效果。

$('tbody > tr').fadeOut('slow');