JQuery Animation проблема с использованием вложенных таблиц

Question

У меня проблема с анимацией с использованием jQuery для вложенных таблиц. Я хочу сделать таблицу, которая немного напоминает древовидную структуру, с небольшим расширением + / - и получением более подробной информации о выбранной строке.

Как изменить следующий код для анимации, чтобы она работала как в Internet Explorer 6.0+, так и в Firefox?

Я могу изменить разметку или javaScript, это не имеет значения, пока это работает.

Если это полезно знать, эта структура генерируется с использованием вложенных повторителей в asp.net. У меня есть доступ к пакету управления RadAjax Telerik, но я не смог заставить их 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 плагин . Это то, что я использую для всех видов деревьев.

На самом деле, семантически более целесообразно использовать 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("-");
}