It's pretty basic - you just call scrollTable() with a table element as argument. You can't use it on an element that hasn't been inserted to the dom tree, since it uses the parentNode to switch things around a bit (Your table is actually split into two tables).
Here's a working sample, just for good meassure: <html> <head> <script type="text/javascript" src="mochikit.js"></script> <script type="text/javascript" src="scrolltable.js"></script> </head> <body> <table id="mylist"> <thead> <tr> <th>foo</th> <th>bar</th> <th>tjim-dada</th> </tr> </thead> <tbody> <tr> <td>lorem ipsum</td> <td>dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <td>dolor sit amet</td> <td>lorem ipsum</td> <td>dolor sit amet</td> </tr> <tr> <td>lorem ipsum</td> <td>dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <td>dolor sit amet</td> <td>lorem ipsum</td> <td>dolor sit amet</td> </tr> <tr> <td>lorem ipsum</td> <td>dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <td>dolor sit amet</td> <td>lorem ipsum</td> <td>dolor sit amet</td> </tr> <tr> <td>lorem ipsum</td> <td>dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <td>dolor sit amet</td> <td>lorem ipsum</td> <td>dolor sit amet</td> </tr> <tr> <td>lorem ipsum</td> <td>dolor sit amet</td> <td>lorem ipsum</td> </tr> <tr> <td>dolor sit amet</td> <td>lorem ipsum</td> <td>dolor sit amet</td> </tr> </tbody> </table> <script type="text/javascript"> scrollTable($("mylist"), "10em"); </script> </body> </html> On 8/14/06, Ivo Beckers <[EMAIL PROTECTED]> wrote: > Hi, > > Do you have a working sample online? I just wanna know how it can be > applied to dynamically generated tables. > > Cheers, Ivo > > > Op 11-aug-2006, om 14:01 heeft troelskn het volgende geschreven: > > > Hi > > I made this little function the other day, which I find quite useful. > If someone else want it, or even if you want to include it in mochikit, > you're welcome. > Basically, it makes a normal table's tbody vertically scrollable - > something that css ought to be able to do for us, but alas ... Works in > ie, ff and opera. (Although a bit quirky in ie). > > /** > * Makes a regular table tbody-scrollable > * > * (c) Troels Knak-Nielsen, Public Domain > * > * Version : 11. aug 2006 > */ > scrollTable = function(table, /* optional */ height) { > if (!height) { > height = "10em"; > } > var tablewidth = elementDimensions(table).w; > var table2 = document.createElement("table"); > table2.className = table.className; > > var thead = table.getElementsByTagName("thead").item(0); > > var ws = []; > forEach( > > thead.getElementsByTagName("tr").item(0).getElementsByTagName("th"), > function(th) { > ws.push(elementDimensions(th).w); > } > ); > > var tbodies = table.getElementsByTagName("tbody"); > for (var i=0; i < tbodies.length; ++i) { > table2.appendChild(table.removeChild(tbodies[i])); > } > > forEach( > [table, table2], > function(t) { > forEach( > t.getElementsByTagName("tr"), > function(tr) { > var i = 0; > forEach( > tr.childNodes, > function(node) { > if (node.nodeName && > (node.nodeName.toLowerCase() == "th" || > node.nodeName.toLowerCase() == "td")) { > > node.style.width = ws[i] + "px"; > ++i; > } > } > ); > } > ) > } > ); > > var container = document.createElement("div"); > container.appendChild(table2); > container.style.overflow = "auto"; > container.style.height = height; > container.style.width = tablewidth + "px"; > > var parent = table.parentNode; > parent.insertBefore(container, table); > parent.removeChild(table); > parent.insertBefore(table, container); > }; > > > > > > -- troels --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to mochikit@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit -~----------~----~----~----~------~----~------~--~---