使用 jQuery 滑动切换一组表行

发布于 2024-10-19 09:38:08 字数 3847 浏览 8 评论 0原文

我对 javaScript 和 jQuery 相当陌生，所以希望这将是一个快速修复。我需要显示一个包含可分为多个类别的数据的表格，并且我想实现一个隐藏/显示每个给定类别中的所有观察结果的幻灯片切换。

下面的代码应该（理想情况下）显示一个 4 列 9 行的表格，每组 3 行前面有一个绿色的“Section i”行。我希望每个节标题都作为幻灯片切换来展开或折叠其下方的所有行。现在，一切都还没有崩溃。有什么想法吗？

<head>
  <style type="text/css">
    td{padding:5px;}
  </style>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript"> 
      $(document).ready(function(){
      $(".flip").click(function(){
          $(this).next(".section").slideToggle();
      });
  });
  </script>

</head>

<body>
    <p>
        <table id="main_table">
        <thead>
            <tr class="firstline">
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 1 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 111</td>
                <td>item 112</td>
                <td>item 113</td>
                <td>item 114</td>
            </tr>
            <tr>
                <td>item 121</td>
                <td>item 122</td>
                <td>item 123</td>
                <td>item 124</td>
            </tr>
            <tr>
                <td>item 131</td>
                <td>item 132</td>
                <td>item 133</td>
                <td>item 134</td>
            </tr>
            </div>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 2 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 211</td>
                <td>item 212</td>
                <td>item 213</td>
                <td>item 214</td>
            </tr>
            <tr>
                <td>item 221</td>
                <td>item 222</td>
                <td>item 223</td>
                <td>item 224</td>
            </tr>
            <tr>
                <td>item 231</td>
                <td>item 232</td>
                <td>item 233</td>
                <td>item 234</td>
            </tr>
            </div>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 3 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 311</td>
                <td>item 312</td>
                <td>item 313</td>
                <td>item 314</td>
            </tr>
            <tr>
                <td>item 321</td>
                <td>item 322</td>
                <td>item 323</td>
                <td>item 324</td>
            </tr>
            <tr>
                <td>item 331</td>
                <td>item 332</td>
                <td>item 333</td>
                <td>item 334</td>
            </tr>
            </div>
        </tbody>
        </table>
    </p>
</body>

原文

I'm fairly new to javaScript and jQuery, so hopefully this will be a quick fix. I need to display a table containing data that can be grouped into several categories, and I'd like to implement a slideToggle that hides/reveals all of the observations in each given category.

The code below should (ideally) display a table with 4 columns and 9 rows, with every group of 3 rows preceded by a green "Section i" row. I would like each Section header to work as a slideToggle that expands or collapses all of the rows beneath it. Right now, nothing is collapsing. Any thoughts?

<head>
  <style type="text/css">
    td{padding:5px;}
  </style>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript"> 
      $(document).ready(function(){
      $(".flip").click(function(){
          $(this).next(".section").slideToggle();
      });
  });
  </script>

</head>

<body>
    <p>
        <table id="main_table">
        <thead>
            <tr class="firstline">
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 1 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 111</td>
                <td>item 112</td>
                <td>item 113</td>
                <td>item 114</td>
            </tr>
            <tr>
                <td>item 121</td>
                <td>item 122</td>
                <td>item 123</td>
                <td>item 124</td>
            </tr>
            <tr>
                <td>item 131</td>
                <td>item 132</td>
                <td>item 133</td>
                <td>item 134</td>
            </tr>
            </div>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 2 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 211</td>
                <td>item 212</td>
                <td>item 213</td>
                <td>item 214</td>
            </tr>
            <tr>
                <td>item 221</td>
                <td>item 222</td>
                <td>item 223</td>
                <td>item 224</td>
            </tr>
            <tr>
                <td>item 231</td>
                <td>item 232</td>
                <td>item 233</td>
                <td>item 234</td>
            </tr>
            </div>
            <tr style="background-color:green; color:white"> 
                <td  colspan="4" class="flip"> Section 3 </td> 
            </tr>
            <div class="section">
            <tr>
                <td>item 311</td>
                <td>item 312</td>
                <td>item 313</td>
                <td>item 314</td>
            </tr>
            <tr>
                <td>item 321</td>
                <td>item 322</td>
                <td>item 323</td>
                <td>item 324</td>
            </tr>
            <tr>
                <td>item 331</td>
                <td>item 332</td>
                <td>item 333</td>
                <td>item 334</td>
            </tr>
            </div>
        </tbody>
        </table>
    </p>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱，才寂寞 2024-10-26 09:38:08

您不能像这样将

混合到

中，而是使用其他  元素。在您的回调中，this 是 
元素，它没有同级元素，因此 .next 没有任何用处；您想要返回，直到到达与您感兴趣的 .section 深度相同的内容，然后从那里调用 .next 。

您的 HTML 应该看起来更像这样：

<table id="main_table">
    <thead>
        <tr class="firstline">
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="4" class="flip"> Section 1 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 111</td>
            <td>item 112</td>
            <td>item 113</td>
            <td>item 114</td>
        </tr>
        <!-- ... -->

您的点击处理程序如下所示：

$('.flip').click(function() {
    $(this)
        .closest('tbody')
        .next('.section')
        .toggle('fast');
});

.closest 调用会返回您的祖先，直到找到，然后您对其调用 .next 。

更新了 jsfiddle： http://jsfiddle.net/ambigously/Udxyb/4/

You can't mix <div>s into a <table> like that, use additional <tbody> elements instead. In your callback, this is the <td> element which has no siblings so .next does nothing useful; you want to go back up until you get to something that is at the same depth as the .section you're interested in and then call .next from there.

Your HTML should look more like this:

<table id="main_table">
    <thead>
        <tr class="firstline">
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="4" class="flip"> Section 1 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 111</td>
            <td>item 112</td>
            <td>item 113</td>
            <td>item 114</td>
        </tr>
        <!-- ... -->

And your click handler like this:

$('.flip').click(function() {
    $(this)
        .closest('tbody')
        .next('.section')
        .toggle('fast');
});

The .closest call goes back up your ancestors until it finds a <tbody> and then you call .next on that.

Updated jsfiddle: http://jsfiddle.net/ambiguous/Udxyb/4/

回复收藏 0 原文

~没有更多了~

关于作者

痞味浪人

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

使用 jQuery 滑动切换一组表行

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

使用 jQuery 滑动切换一组表行

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。