Dynamic table rows & JS frameworks
Recently I've had to do some work applying effects to tabular data using jQuery. Turns out jQuery's not too good at applying effects (sliding, fading, etc) to table rows (discussion about this problem here). Frustrated, I decided to have a go at jQuery's dreaded competitor frameworks (I'm one of those Drupal/jQuery-fits-all kinda guys). I tried applying sliding effects to table-rows in YUI and Prototype/Scriptaculous, but those didn't work either (discussion on Scriptaculous row issues). In MooTools it almost worked!; however, the "almost" is disappointing enough to where I've basically given up & considered table-row-effects with javascript a lost cause.
Check out how jQuery and MooTools compare with table-row slide effects. The other frameworks either didn't do anything or just waited a second before just toggling visibility without an effect.
Anyway, the obvious solution is divs... but I'm not alone in having to work with very non-div-friendly tabular data. So if anyone comes up with something... :)
Arggh... just came to this
Arggh... just came to this same frustrating conclusion myself.
They way I got around it
They way I got around it recently was to wrap a table in a div for every row. For example:
<table>
<tr><td>Item1</td><td>Item2</td></tr>
<tr><td>Item3</td><td>Item4</td></tr>
</table>
will become:
<div>
<table><tr><td>Item1</td><td>Item2</td></tr></table>
</div>
<div>
<table><tr><td>Item3</td><td>Item4</td></tr></table>
</div>
I think this is what most people try as an alternative and get frustrated by the fact that the cell's don't align as they would if they were all part of the same table. All you need to do is apply some css to adjust cell width. It requires more manual management, vs html automatic cell-width control based on cell content, but it gets the job done:
td{width:100px}
td:first-child{width:150px} /*control particular cells' widths, or alternatively use classes/id's */