36

是否可以使表格行展开和折叠？任何人都可以向我推荐脚本或示例吗？

如果可能的话，我更喜欢 jQuery。我有一个想要实现的绘图概念：

替代文字

4

6 回答 6

54

是的，一个表格行可以上下滑动，但它很丑，因为它改变了表格的形状，让所有东西都跳了起来。相反，在 each 中放置一个元素td，一些有意义的东西，比如 ap或h2等。

至于实现表格滑动切换......

将点击处理程序放在整个表格上可能是最简单的，.stopPropagation()并检查点击了什么。

如果单击带有 colspan 的行中的 td，请关闭其中的 td p。如果它不是带有 colspan 的连续 td，则关闭然后切换下一行的p.

必须将所有书面内容包装在tds 内的元素中，因为您永远不希望orslideUptdtr或 table的形状发生变化！

就像是：

$(function() {
  
      // Initially hide toggleable content
    $("td[colspan=3]").find("p").hide();

      // Click handler on entire table
    $("table").click(function(event) {

          // No bubbling up
        event.stopPropagation();

        var $target = $(event.target);

          // Open and close the appropriate thing
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});​

试试这个 jsFiddle 例子。

...并尝试这个 jsFiddle 显示+--切换的实现。

HTML 只需要有几个tds 的交替行，然后是tdcolspan 大于 1 的一行。显然，您可以很容易地调整细节。

HTML 看起来像：

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>
    
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>​
于 2010-10-09T20:42:43.463 回答
11

你可以这样做：

HTML

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td><a href="#" id="show_1">Show Extra</a></td>
    </tr>
    <tr>
        <td colspan="5">
            <div id="extra_1" style="display: none;">
                <br>hidden row
                <br>hidden row
                <br>hidden row
            </div>
        </td>
    </tr>
</table>

jQuery

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
});

在 JSFiddle 上查看演示

于 2010-10-09T19:15:32.903 回答
3

这取决于您的标记，但它肯定可以工作，我使用了以下内容：

jQuery

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).siblings('p').slideToggle();
      }
      );
  }
  );

html

  <table>
  <thead>
    <tr>
      <th>Actor</th>
      <th>Which Doctor</th>
      <th>Significant companion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><h2>William Hartnell</h2></td>
      <td><h2>First</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Susan Foreman</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Patrick Troughton</h2></td>
      <td><h2>Second</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jamie MacCrimmon</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Jon Pertwee</h2></td>
      <td><h2>Third</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jo Grant</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
  </tbody>
</table>

我接近它的方法是折叠行的单元格中的特定元素，这样，在我的情况下，行将slideUp()作为段落被隐藏，并且仍然留下一个元素，h2单击以重新显示内容. 如果该行完全倒塌，就没有显而易见的方法可以将其恢复。

JS Bin 演示

正如@Peter Ajtai 所指出的，在评论中，上述方法只关注一个单元格（尽管是故意的）。要扩展所有子p元素，这将起作用：

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).closest('tr').find('p').slideToggle();
      }
      );
  }
  );

JS Bin 演示

于 2010-10-09T19:16:11.897 回答
2

jQuery

$(function() {
    $("td[colspan=3]").find("div").hide();
    $("tr").click(function(event) {
        var $target = $(event.target);
        $target.closest("tr").next().find("div").slideToggle();                
    });
});

HTML

<table>
    <thead>
        <tr>
            <th>one</th><th>two</th><th>three</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td><p>data<p></td><td>data</td><td>data</td>
        </tr>
        <tr>
            <td colspan="3">
                <div>
                    <table>
                            <tr>
                                <td>data</td><td>data</td>
                            </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

这很像上面前面的例子。我在尝试实现该示例时发现，如果在未展开的情况下单击要展开的表格行，它将消失，并且不再可展开

为了解决这个问题，我只是删除了单击可展开元素以向上滑动的功能，并使其只能使用上面的表格行进行切换。

我还对 HTML 和相应的 jQuery 做了一些小的改动。

注意：我本来只是发表评论，但还不允许发表长篇文章。只是想发布这个，因为我花了一点时间才弄清楚消失的表格行发生了什么。

归功于彼得·阿杰泰

于 2015-11-20T14:32:38.400 回答
0

要回答你的问题，不。不过，这将是可能的 div 。唯一的问题是，如果功能是用 div 而不是表来完成的，那会引起混乱。

于 2010-10-09T18:49:44.913 回答
0

好吧，我会说使用 DIV 而不是 table，因为它会更容易（但使用 table 没有错）。

我的方法是使用 jQuery.ajax 并从服务器请求更多数据，这样，选定的 DIV（或 TD，如果您使用表）将根据请求的内容自动扩展。

这样，它可以节省带宽并使其运行速度更快，因为您不会一次加载所有内容。它仅在被选中时加载。

于 2010-10-09T21:08:15.010 回答