使用嵌套表的 jQuery 动画问题

Question

我在嵌套表上使用 jQuery 动画时遇到问题。我想制作一个有点像树视图的表格，用一点 + / - 来展开并获取有关单击行的更多详细信息。

如何修改以下代码以使动画同时在 Internet Explorer 6.0+ 和 Firefox 中运行？

我可以更改标记或javascript，只要它有效就可以了。

如果知道这一点很有用，则此结构是使用 asp.net 中的嵌套中继器生成的。 我可以访问 Telerik 的 radAjax 控件套件，但我无法让他们的 radGrid 使用嵌套表。

文档结构：

    <tr>
        <th>&nbsp;</th>
        <th>Code</th>
        <th>Title</th>
    </tr>


    <tr>
        <td><span class="TreeCollapseSign">-</span></td>
        <td>WAA-864R</td>
        <td>Code 1 ... some details ... - MODULE 2</td>        
    </tr>

    <tr>
        <td colspan="6">
            <table>     
                <tr>
                    <th>Extra Info 1</th>
                    <th>Extra Info 2</th>
                    <th>Extra Info 3</th>
                </tr>

                <tr>
                    <td>Some info...</td>
                    <td>Some more info...</td>
                    <td>Yet more Info</td>
                </tr>                                
            </table>
        </td>
    </tr>
</table>

Javascript：

<script type="text/javascript">
    (function($) {
        $(document).ready(function(){

            $(".TreeCollapseSign").data("visible", true);

            $(".TreeCollapseSign").click(function(){

                if ($(this).data("visible")) {
                    $(this).parent().parent().next().fadeOut().end().end().end().data("visible", false).text("+");                
                } else {
                    $(this).parent().parent().next().fadeIn().end().end().end().data("visible", true).text("-");
                }

            });
        });
    })($)
</script>

Answer 1

你能改变输出代码，使用 UL 代替表格吗？

如果可以，您可能想看看jQuery Treeview plugin。这就是我用于所有树视图的内容。

实际上，使用 UL 而不是树视图的表在语义上更合适，但在您的情况下，这取决于是否有机会更改代码。

无论如何，如果你不能，我认为你不能淡出TR......我过去也遇到过类似的问题，所以我建议改为淡出内表，然后隐藏TR。

另外，调用 end() 3 次也没有意义。如果在显示/隐藏内表后再次执行 $(this) 会更快、更易读：

var innerTable = $(this).parent().parent().next().find("table");
if ($(this).data("visible")) {
  innerTable.fadeOut();
  innerTable.parent().hide();
  $(this)
    .data("visible", false)
    .text("+");
} else {
  innerTable.parent().show();
  innerTable.fadeIn();
  $(this)
    .data("visible", true)
    .text("-");
}