2

Can anyone tell me why when using $('tr').slideDown('slow'); it causes the table row to forget its width, height etc.

and if there is a way to fix it?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Hailwood
  • 89,623
  • 107
  • 270
  • 423
  • possible duplicate of [jQuery - How to Use slideDown (or show) function on a table row?](http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row) – Andy E Jul 29 '10 at 15:05

3 Answers3

4

Animations are not supported on table rows.
Emily typed here
you can put the content in a div inside the td and doing a slideDown on the div...

Community
  • 1
  • 1
SimaWB
  • 9,246
  • 2
  • 41
  • 46
2

I fixed same problem with adding div into current table row->cells(TR->TD).

My sample table:

<table>
<tr id='row_1'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
<tr id='row_2'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
<tr id='row_3'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
</table>

Then if you need this make:

$('#row_1').slideDown(); // Make this onclick or some other event
$('#row_1').slideUp(); // Make this onclick or some other event

You must do:

$('#row_1 div').slideDown(); // Make this onclick or some other event
$('#row_1 div').slideUp(); // Make this onclick or some other event

Some lines of code more, but didnt found other way to solve this.

Spudley
  • 166,037
  • 39
  • 233
  • 307
Lauris Kuznecovs
  • 819
  • 1
  • 12
  • 14
0

I suspect it's because jQuery animation code tends to assume it can use display: block for elements that seem like they're block-level elements. For a <tr> that'd be bad, because it wants to be display: table-row (I think; something like that).

Pointy
  • 405,095
  • 59
  • 585
  • 614