jQuery - zwijane wiersze i animacja - jak?
Hej!
Mam mniej więcej taką tabelkę:
<table>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
</table>
I teraz chciałbym, aby po kliknięciu w nagłówek, wiersz poniżej (z divem) był zawijany, ale z płynną animacją.
Póki co, mam coś takiego, co owszem zawija, ale niestety nie mam slide'a (fade jest, ale nie ro/zwija płynnie):
<script type="text/javascript">
$(document).ready(function()
$("#report > tbody > tr:odd").addClass("odd");
$("#report > tbody > tr:not(.odd)").hide();
$("#report > tbody > tr:first-child").show();
$("#report > tbody > tr.odd").click(function()
$(this).next("tr").slideToggle(200);
$(this).find(".arrow").toggleClass("up");
);
//$("#report").jExpand();
);
</script>
<table id="report">
<tbody>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td colspan="4">
321313212313213131313
54454446
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td colspan="4">
<table width="335" >
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="love">
<td>456;</td>
<td>jayy</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I generalnie nie będzie zwijać. Wbudowana funkcja slideDown i slideUp niestety nie jest idealna. Musisz napisać własną.
Przerobiłem jQuery trochę:
<script type="text/javascript">
$(document).ready(function()
$("#report > tbody > tr:odd").addClass("odd");
$("#report > tbody > tr:not(.odd) div").hide();
$("#report > tbody > tr:first-child").show();
$("#report > tbody > tr.odd").click(function()
$(this).next("tr").children("td").children("div").slideToggle();
$(this).find(".arrow").toggleClass("up");
);
//$("#report").jExpand();
);
</script>
Ale niestety dalej haczy :/
W "ukryte" wiersze wpakowałem diva.