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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/mochikit
-~----------~----~----~----~------~----~------~--~---
