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,438
  • 68
  • 55
  • 126
Hailwood
  • 85,177
  • 105
  • 260
  • 417
  • 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,157
  • 2
  • 38
  • 45
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
  • 161,975
  • 39
  • 229
  • 303
Lauris Kuznecovs
  • 623
  • 1
  • 9
  • 12
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
  • 389,373
  • 58
  • 564
  • 602