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

Question

Closed. This question is seeking recommendations for software libraries, tutorials, tools, books, or other off-site resources. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

我们不允许提出寻求软件库、教程、工具、书籍或其他场外资源推荐的问题。您可以编辑问题，以便用事实和引文来回答。

7 年前已关闭。

Answer 1

是的，表格行可以上下滑动，但它很丑，因为它改变了表格的形状并使所有内容都跳跃。相反，在每个 td 中放置一个元素，例如 p 或 h2 等有意义的元素。

至于实现表格滑动切换.. 将点击处理程序放在整个表格上可能

是最简单的， .stopPropagation( ) 和检查点击的内容。

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

将所有书面内容包装在 td 内的元素中非常重要，因为您永远不想 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();
        }                    
    });
});​

尝试一下这个 jsFiddle 示例。

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

HTML 只需要有几个 td 的交替行，然后是一个 colspan 的 td 大于 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>​

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 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() 因为段落被隐藏，并且仍然留下一个元素 h2 供单击以重新显示内容。如果行完全倒塌，就没有明显的方法可以将其恢复原样。

JS Bin 演示

---

正如 @Peter Ajtai 在评论中指出的，上述方法仅关注一个单元格（尽管是故意的）。要展开所有子 p 元素，可以使用以下方法：

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

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，如果您使用表）将根据请求的内容自动扩展。

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