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”）选择标题类。之后，我可以解码标题ID并隐藏行。

我不确定，如果这是一个聪明的解决方案。那么也许有人有一个更好的？（我希望你们明白我要做的事情;））

我想问的是：

最聪明的代码是什么：

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

Answer 1

最好的方法是将标题包裹在<thead>和<tbody>中的行中，然后您可以使用此代码：

$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

如果将标题行放在<thead>元素中，并将表的主体放在<tbody>元素中，则可以使用以下jQuery来实现预期效果。

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

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

4 个答案:

编辑：