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

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 plugin. Это то, что я использую для всех древовидных изображений.

На самом деле семантически более целесообразно использовать UL, а не таблицу для дерева, но в вашем случае это будет зависеть от возможности изменения кода вообще.

В любом случае, на случай, если вы не можете, я думаю, вы не можете исчезнуть из TR ... У меня была аналогичная проблема в прошлом, поэтому я предлагаю вместо этого затухать внутреннюю таблицу, а затем скрывать TR ,

Кроме того, нет смысла в вызове end() 3 раза. Это быстрее и читабельнее, если вы просто сделаете $ (это) снова после того, как вы покажете/спрячете внутреннюю таблицу:

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