由于某种原因无法显示/隐藏像 div 这样的表行
我对 div 滑块使用了animatecollapse，没有任何缺陷。但是，我现在需要使用表行滑块，但它的性能根本不一样。这是我正在使用的表格的一部分，以便您了解。
<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>
这是页脚文件中放置的内容：
<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>
I've used animatedcollapse for my div sliders with no flaws. However, I now need to use a table row slider and it isn't performing the same at all. Here is a portion of the table I am using so you get an idea.
<table>
Reply to post...
</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>
Reply
07/11/10 03:12:20 PM
Here is what is placed at the footer file:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可能不喜欢这个解决方案，因为它有点难看（假设您绝对依赖于基于表格的布局）。
您需要在第一个表格单元格内嵌套另一个表格。像这样：
等等...
从那里您可以将您最喜欢的显示隐藏动画分配给我标记为“显示隐藏”的表格单元格。
或者更简单的应用是将行输出为 div（而不是 tr），然后输出内部表格以实现您的结构。
动画在这两个版本的解决方案中看起来都不错，缺点是您需要为每个 td 分配定义的宽度，以便您可以维护所需的晶格结构。
希望这有帮助。
为了完全兼容 xhtml，我将使用“dl”而不是“table”。
You may not like the solution, as it get's a little ugly (assuming you are absolutely tied to a Table based layout).
You'll need to nest another table inside the first table cell. Like so:
etc...
From there you can assign your fav show-hide animation to the table cell I marked "show-hide".
Or the more simple application of this would be to output the rows as divs (instead of tr's) then a table inside to achieve your structure.
The animation looks nice on either of these versions of the solution, the con being that you need to assign defined widths for each td so that you can maintain the lattice structure you need.
Hope this helps.
To be fully xhtml compliant, I'd use "dl" instead of "table".
假设
animatedcollapse是一个通过在元素上设置overflow:hidden然后更改其height来工作的动画，恐怕溢出根本不会由于其不同/不寻常的布局模型（无论如何在大多数浏览器和大多数情况下），不适用于表行。为了使其工作，您必须将该行分解到它自己的表中。然后，为了获得最广泛的兼容性，您可以将必须隐藏的表格放入
中，并在 div 上执行溢出/动画。由于您现在有多个表（三个，如果目标行之前和之后之前有行），您需要确保它们的列对齐，以使它们看起来像一个表。这应该通过为表格指定样式
table-layout:fixed; 来完成。 width: 100%;（然后使用第一行单元格上的width样式或一组< 来调整需要与其他宽度不同的任何列的大小;col>元素）。table-layout:fixed在任何情况下通常都是首选，因为它比默认的“自动”表格布局算法更快、更可预测的跨浏览器。Assuming that
animatedcollapseis an animation that works by settingoverflow: hiddenon an element and then changing itsheight, I'm afraid overflow simply doesn't work on table-rows due to their different/unusual layout model (in most browsers and under most circumstances, anyway).To make it work, you'll have to break out that row into its own table. Then, for widest compatibility, you can put the table that has to hide inside a
<div>, and do the overflow/animation on the div.Since you now have multiple tables (three, if there were previously rows before and after the target row), you need to make sure their columns line up, to make them look like a single table. This should be done by giving the tables the style
table-layout: fixed; width: 100%;(and then sizing any columns that need a different width from the others with awidthstyle on the cells in the first row, or a set of<col>elements).table-layout: fixedis in any case generally to be preferred as it is faster and more predictable cross-browser than the default ‘auto’ table-layout algorithm.