Question

是否可以使表格行展开并折叠？任何人都可以将我推荐给脚本或示例吗？如果可能的话，我更喜欢jQuery。我有一个我想要实现的绘图概念：

alt text

Answer 1

是的，表格行可以上下滑动，但它很难看，因为它会改变表格的形状并使所有内容都跳跃。相反，将put和元素放在每个td ......有意义的内容，如p或h2等。

关于如何实现表格幻灯片切换......

将点击处理程序放在整个表格上可能是最简单的， .stopPropagation() 和 check what was clicked 。

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

本质上是将所有书面内容包装在td s 内的元素中，因为您从不想slideUp td或tr 或表格形状会改变！

类似的东西：

$(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(); } }); });

的 Try it out with this jsFiddle example.

<强> ... and try out this jsFiddle showing implementation of a + - - toggle.

HTML必须具有多个td s的交替行，然后是一个大于1的colspan td的行。显然可以很容易地调整细节。

HTML看起来像：

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

Answer 2

你可以这样做：

<强> 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();
});

查看demo on JSFiddle

希望这有帮助！

Answer 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()，因为段落被隐藏，并且仍然留下一个元素，{{1点击以重新显示内容。如果该行完全崩溃，则没有明显的方法可以将其恢复。

Demo at JS Bin

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

Demo at JS Bin

Answer 4

的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做了一些小改动。

注意：我刚刚发表了评论，但我不允许在那里发帖。只是想发布这个，因为我花了一些时间来弄清楚正在消失的表行发生了什么。

希望这有助于某人！

感谢Peter Ajtai

Answer 5

要回答你的问题，不。尽管这可能与div有关。如果功能是用div而不是表格完成的，那么唯一的问题是会引起抨击。

Answer 6

好吧，我会说使用DIV而不是表格，因为它会更容易（但使用表格没有任何问题）。

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

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

表格行可以展开和关闭吗？

6 个答案:

的 Try it out with this jsFiddle example.

的jQuery

HTML