Реализуйте код складывания для отчета с jQuery

Question

Я пытаюсь свернуть или расширить строки таблицы с помощью + и - знак отображается в первом столбце, используя jQuery.

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

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");

   });


});

Я пытаюсь использовать этот код. Но я хочу, чтобы ребенок родителя я нажимаю на один, чтобы переключиться. Любые идеи о том, как это сделать?

Образец HTML.

<table>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>

</table>

Редактировать: Я пытаюсь положить изображение + или - в том же строке, что и строка 1, Line4 и попытка получить ручку в скрипте Java для переключения между двумя изображениями. Может ли кто-нибудь помочь мне на этом?

Редактировать 1: Могу ли я свернуть все дерево, когда документ загружен. Я начинаю с использованием XQuery.

Answer 1

(В ответ на измененный код)

Есть два способа: либо измените код вашего кода, чтобы переключить только строки после нажатого заголовка:

$("tr.header").click(function () { 
  $(this).nextUntil(".header").slideToggle("fast");
});

Или используйте оригинальный код и оберните секции в TBodys:

<table>
  <tbody>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>
  </tbody>
</table>

Answer 2

Посмотрите на это для включения в игру в игру:

Использование jQuery, чтобы найти следующую строку таблицы

Я включил его в код UMANG Shared, и это, кажется, работает над переключением изображения, а также рядов внизу.

$ (документ). Страри (функция () {

// Это свернут строки на начальной странице загрузки $ («tr.Header»). NextUntil («. Заголовок»). Служен («быстрая», функция () {}); // end slideToggle.

// Это расширит строку коллапса и переключателя + и - изображения $ («TR.Header»). Нажмите (Функция () {

   $(this).nextUntil(".header").slideToggle("fast", function () { 
   }); //end slideToggle

   if ( ( $(this).hasClass('hidden') ) ) {
     $('img', this).attr("src", "plus.gif");
     $('img', this).attr("alt", "Click to expand row");
  } else {
     $('img', this).attr("src", "minus.gif");
     $('img', this).attr("alt", "Click to collapse row");
  }

   $(this).toggleClass('hidden');
   $(this).parent().next().toggle();

}); // end click

}); // конец документа

Вот связанный HTML, но вам придется удалить комментарии HTML вокруг тега IMG, потому что это просто для предотвращения мышления StackoverFlow, я публикую фактическое изображение.

1 line1 2 line2 3 line3 4 line4 5 line5 6 line6

Answer 3

Ваш текущий код расширяется / разветвляет ребенка родительской строки. В вашем примере он разрушается как дочерние строки (Data1, data2 & data3, data4)

Вы пытаетесь добиться чего-то другого?

Umang