代码之家 › 专栏 › 技术社区 › David Hague

jquery中的可折叠表

css html jquery

David Hague · 技术社区 · 16 年前

我正试图创建一个表,其中包含可以使用jquery折叠和展开的标题行。以下是迄今为止我的全部代码:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").each(function() {
         $(this).slideToggle("fast");
      });
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr id="cat1" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1" class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr id="cat2" class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

</body>                                                                 
</html>

如果我是正确的,jquery的英文部分如下:“当单击ID为“cat1”且类为“header”的行时,查找ID为“cat1”且类为“child”的所有行,并为每一行使用slidetoggle。”

但是,当我运行它并单击标题行时,什么也不会发生。有什么见解吗?

编辑:在HTML表中添加了第二个类别。对不起,我应该更具体一点。我希望能够单击特定类别的标题行,并且只折叠那些子行,而不是页面上的所有子行。以这种方式,表的行为就像一个“手风琴”,行按类别分组在一起。

4 回复 | 直到 12 年前

Rory 16 年前

这将导致单击只影响包含您单击的标题的表中的行,这意味着您可以将其更改为使用CSS类,而不是复制ID。

$("tr#cat1.header").click(function () { 
   $("tr#cat1.child", $(this).parent()).slideToggle("fast");
});

基本上 this 是单击的头,我们将其包装在jquery对象中并调用 parent() (返回表),然后将其指定为新查询的上下文。

您的页面现在看起来如下:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
   });


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
</body>                                                                 
</html>

John Rasch 16 年前

首先,您不应该有重复的行ID。对于页面上的每个元素,ID都应该是唯一的。

另外,你不应该使用 each ,因为jquery将自动应用 slideToggle 与选择器匹配的每个元素的函数。我建议删除ID并改用类名:

$("tr.header").click(function () { 
   $("tr.child").slideToggle("fast");
});

如果要确保只有某些表可以执行此切换功能,请在表上放置类并更新选择器:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
---

$(".collapsible tr:first").click(function () { 
   $(this).nextAll().slideToggle("fast");
});

对编辑的响应:

罗里的回答是正确的,我只是在扩展它。如果使用多个表,则可以从 <tr> 将表简化为:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Cat1</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

<table class="collapsible">
    <tr>
        <td>Cat2</td>
        <td>Cat2</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

而jquery则是:

$(".collapsible tr:first").click(function () {  
   $(this).nextAll().slideToggle("fast"); 
});

Community Mohan Dere 8 年前

这是@rory的扩展 answer 要处理多个层次结构,我也更喜欢 fadeToggle 到 slideToggle 如(至少在FF V24中)当表中有数百行时, 滑行器 一秒钟什么也不做,然后所有的行突然消失——这让你怀疑你是否真的点击了这一行。 传真机 立即开始褪色,这样你就知道发生了什么事。

而不是 child 类I使用 id 对于直接父级,则可以递归地遍历每个分支。还有一个“折叠的”类,我用它来修复当子行已经折叠时折叠父行的错误。

请看 JSFiddle 以下代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">                                         
$(document).ready(function() {
    $('tr.header').click(function () { 
        toggleRowChildren($(this), 'header');
    });

    function toggleRowChildren(parentRowElement, parentClass) {
        var childClass = parentRowElement.attr('id');
        $('tr.'+childClass, parentRowElement.parent()).fadeToggle('fast');
        $('tr.'+childClass).each(function(){
            if ($(this).hasClass(parentClass) && !$(this).hasClass('collapsed')) {
                toggleRowChildren($(this), parentClass);
            }
        });
        parentRowElement.toggleClass('collapsed');
    }
});
</script>                                                               
</head>                                                                 
<body>                                                                  
<table class="table table-hover table-bordered">
    <tr id="cat1" class="header">
        <th>Cat1</th>
        <th>Row</th>
    </tr>
    <tr class="cat1">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr id="cat1a" class="header cat1">
        <th>Cat1a</th>
        <th>Row</th>
    </tr>
    <tr class="cat1a">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="cat1a">
        <td>data3</td>
        <td>data4</td>
    </tr>
    <tr id="cat2" class="header">
        <th>Cat2</th>
        <th>Row</th>
    </tr>
    <tr class="cat2">
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>
</body>                                                                 
</html>

-1

Bobby 16 年前

难道不是更像这样吗?我的意思是,这通常是整个文件。

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").slideToggle("fast");
   });