JQuery выпадающий с вложенными таблицами

0

У меня есть несколько уровней данных, настроенных во вложенных таблицах. Я хочу, чтобы он развернулся на каждом уровне. Как я должен это сделать? Этот jQuery работает для моих вложенных элементов ul и li на других страницах, но, похоже, это не работает для вложенных таблиц. Какие-либо предложения?

HTML:

<table>
   <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
   </tr>
   <tr class="dropClick">
      <td>8/2/2013</td>
      <td>$960.00</td>
      <td>$48.14</td>
      <table class="dropDown">
         <tr class="dropClick">
            <td>Data</td>
            <td>$960.00</td>
            <table class="dropDown">
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
            </table>
         </tr>
         <!--end dropClick-->
         <tr class="dropClick">
            <td>Data</td>
            <td>$72.56</td>
            <table class="dropDown">
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
            </table>
         </tr>
         <!--end dropClick-->
         <tr>
            <td>Data</td>
            <td>$873.50</td>
         </tr>
         <tr>
            <td>Data</td>
            <td>$48.14</td>
         </tr>
      </table>
   </tr>
   <!--end dropClick-->
</table>  

Сценарий:

$(document).ready(function () {
    $(".dropDown").hide();

    $(".dropClick").click(function () {
        $this = $(this);
        $this.find(".dropDown").slideToggle("slow");
    });
});  
  • 1
    Неверный HTML не помогает
Теги:

2 ответа

0

Я думаю, вы МОЖЕТЕ означать это

Демо-версия

$(function () {
    $(".dropDown").hide();
    $(".dropClick").on("click",function () {
        var $nextDrop = $(this).parent().find(".dropDown").first();
        $nextDrop.slideToggle("slow");
    });
});

используя исправленный html с выпадающим классом в строке, которая содержит раскрывающуюся таблицу

  • 0
    Это близко Однако я пытаюсь развернуть таблицы в мобильном приложении. Поэтому я хочу, чтобы каждый выпадающий занимал ширину экрана. Используя ваш HTML, кажется, что дочерние таблицы застряли в родительском столбце. Кажется, я не могу заставить их использовать всю ширину экрана в CSS, есть предложения?
  • 0
    Сделайте каждый страницу!
Показать ещё 2 комментария
0

У меня не было бы вложенных таблиц с тем же именем класса. Убедитесь, что имена классов различны, если они вложены.

  • 0
    так что вы просто создадите новый оператор jQuery для каждого класса?
  • 0
    Сколько строк у вас в таблице верхнего уровня? Если таблицы или строки находятся на одном уровне, проблем с одинаковым именем класса не возникает. Как только они вложены и 2 элемента DOM имеют одинаковые имена классов, и вы используете jquery для переключения видимости, это становится проблемой.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню