Реализуйте код складывания для отчета с jQuery
-
27-09-2019 - |
Вопрос
Я пытаюсь свернуть или расширить строки таблицы с помощью + и - знак отображается в первом столбце, используя 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.
Решение
(В ответ на измененный код)
Есть два способа: либо измените код вашего кода, чтобы переключить только строки после нажатого заголовка:
$("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>
Другие советы
Посмотрите на это для включения в игру в игру:
Использование 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Ваш текущий код расширяется / разветвляет ребенка родительской строки. В вашем примере он разрушается как дочерние строки (Data1, data2 & data3, data4)
Вы пытаетесь добиться чего-то другого?
Umang