由于某种原因，无法像 div 一样显示/隐藏表格行答案

【问题标题】：Can't show/hide table rows like the divs for some reason由于某种原因，无法像 div 一样显示/隐藏表格行
【发布时间】：2016-12-01 20:04:26
【问题描述】：

我为我的 div 滑块使用了动画折叠，没有任何缺陷。但是，我现在需要使用表格行滑块，它的性能完全不同。这是我正在使用的表格的一部分，因此您可以了解一下。

<table>

回复帖子...

   </div>
    <script type="text/javascript">

            $(document).ready(function () {
                var editor = CKEDITOR.replace( 'newsfeed_status7',
                           {
                                   toolbar :
                                   [
                                          ['Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'Undo', 'Redo', '-', 'MediaEmbed','Smiley', 'SpellChecker', 'Find','Replace']
                                   ],
                                   height: '50px'
                           });

            });

    </script>
        <table width="100%">
            <tr>
                <td align="left" width="25%" style="padding-left:15px;"></td>
                <td align="left" width="25%"></td>
                <td align="right"></td>

                <td align="right" width="20%" style="padding-right:15px;"><input type="submit" value="Reply To Post" class="submitbtn" /></td>
            </tr>
        </table>
    </td>
</tr>

回复 2010 年 7 月 11 日下午 3:12:20

这是放在页脚文件中的内容：

<script type="text/javascript">
animatedcollapse.addDiv('tr7', 'fade=1') animatedcollapse.addDiv('tr6', 'fade=1') animatedcollapse.addDiv('tr4', 'fade=1') animatedcollapse.addDiv('tr2', 'fade=1') animatedcollapse.addDiv('tr1', 'fade=1') animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>

【问题讨论】：

标签： javascript html html-table rows

【解决方案1】：

您可能不喜欢该解决方案，因为它有点难看（假设您完全依赖于基于表格的布局）。

您需要在第一个表格单元格中嵌套另一个表格。像这样：

table
    tr
      td class="show-hide"
        table
            tr
                td
                td
                td

等等……

您可以从那里将您最喜欢的显示隐藏动画分配给我标记为“显示隐藏”的表格单元格。

或者更简单的应用是将行输出为 div（而不是 tr），然后在内部输出一个表格来实现您的结构。

在这些版本的解决方案中，动画看起来都不错，缺点是您需要为每个 td 分配定义的宽度，以便您可以保持所需的晶格结构。

希望这会有所帮助。

为了完全兼容 xhtml，我会使用“dl”而不是“table”。

【讨论】：

【解决方案2】：

假设animatedcollapse 是一个动画，它通过在一个元素上设置overflow: hidden 然后更改它的height 来工作，我担心溢出根本不适用于表格行，因为它们的布局不同/不寻常模型（在大多数浏览器和大多数情况下，无论如何）。

要使其正常工作，您必须将该行拆分到自己的表格中。然后，为了获得最大的兼容性，您可以将必须隐藏的表格放在 <div> 内，并在 div 上进行溢出/动画处理。

由于您现在有多个表（三个，如果之前在目标行之前和之后有行），您需要确保它们的列对齐，以使它们看起来像一个表。这应该通过为表格提供样式table-layout: fixed; width: 100%; 来完成（然后在第一行的单元格上使用width 样式或一组<col> 元素来调整任何需要与其他宽度不同的列的大小） .

table-layout: fixed 在任何情况下都是首选，因为它比默认的“自动”表格布局算法更快、更可预测的跨浏览器。

【讨论】：