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

使用嵌套表的jQuery动画问题

1 个答案: