sort table, una ayuda pofavo

Hace algun tiempo meddle, puso esta direccion donde dan un magnifico script para ordenar tablas,dinamicamente sin tener que recargar la pagina, ooohhhhhhhhhhhhhhhhh!!!!!!

pero ahora tengo un pequeño p'oblema, este script te coge las cabeceras y te las convierte en enlaces que disparan la funcion para ordenar las tablas, el caso es que yo quiero meter la tabla dentro de un <div style:overflow=auto> para poder scrollearla y dejar las cabeceras fuera.
Hay alguna manera de dispara estas funciones desde fuera de la propia tabla??????
Lo pregunto por si alguien ha tenido que lidiar antes con este script, hace tiempo solucione el problema con un script distinto que era este:

<code>
var lastTableNumber;
var lastColumnNumber;
var lastOrder;

function sortTableRows ()
{
// get all tables in this document
tables = document.getElementsByTagName ('table');

// iterate through all the tables, to make the tables sortable
for (var tableNumber = 0; tableNumber &lt; tables.length; tableNumber++)
{
// check if the table uses the thead-element
if (thead = tables[tableNumber].getElementsByTagName ('thead')) headerRow = thead[0].getElementsByTagName ('tr')[0];
// if not, use the first row of this table as header
else headerRow = tables[tableNumber].getElementsByTagName ('tr')[0];

// iterate through all the th-elements, to add the onclick event with the 'sortColumn'-function attached
tableHeaders = headerRow.getElementsByTagName ('th');
for (var columnNumber = 0; columnNumber &lt; tableHeaders.length; columnNumber++)
{
// attach the 'sortColumn'-function
if (!document.all &amp;&amp; document.getElementById)
{
// this method works fine in Mozillla, but IE doesn't do anything, really.
// It's a pity, 'cause when using the setAttribute-function you can style
// the element with CSS using:
// th[onclick] { /* some properties here */ }
tableHeaders[columnNumber].setAttribute ('onclick', 'sortColumn(' + tableNumber + ', ' + columnNumber + ');');
}
else if (document.all &amp;&amp; document.getElementById)
{
tableHeaders[columnNumber]['onclick'] = new Function ('sortColumn(' + tableNumber + ', ' + columnNumber + ')');
//tableHeaders[columnNumber].style.cursor = 'hand';
}
}
}
}

function sortColumn (tableNumber, columnNumber)
{
// set some variables we're going to use
var rowData = new Array ();
var rowDataSorted = new Array ();
var rowToBeRemoved = new Array ();
var rowToBeInserted = new Array ();
var table, tbody, rows, firstRow, order;

// check wheter it should be ordered ascending or descending
if (lastTableNumber == tableNumber &amp;&amp; lastColumnNumber == columnNumber)
{
if (lastOrder == 'ascending') order = 'descending';
else if (lastOrder == 'descending') order = 'ascending';
}
else order = 'ascending';

// in case there is a tbody-element, we'll use the rows nested in this element ...
table = document.getElementsByTagName ('table')[tableNumber];
if (table.getElementsByTagName ('tbody'))
{
tbody = table.getElementsByTagName ('tbody')[0];
firstRow = 0;
}
// ... otherwise we'll use the rows that are directly nested in the table-element, starting with the second (assuming the first row is the header)
else
{
tbody = table;
firstRow = 1;
}

// put all the rows in an array, so we can access each easily
rows = tbody.getElementsByTagName ('tr');

// iterate through the rows, and put the data according to which the table must be sorted in an array
for (var rowNumber = firstRow; rowNumber &lt; rows.length; rowNumber++)
{
data = rows[rowNumber].getElementsByTagName ('td')[columnNumber].firstChild.nodeValue;
rowData[rowData.length] = new Array (rowNumber, data);
}

// choose the relevant sorting method, according to the first row:
// - the data is numeric
if (rowData[0][1].match(/^[\d\.]+$/)) rowDataSorted = rowData.sort (numeric);
// - no particular type of data recognized, use the standard sorting-method
else rowDataSorted = rowData.sort (normal);

// iterate through the rows, that now are in the correct order ...
for (var x = 0; x &lt; rowDataSorted.length; x++)
{
originalRow = rows[(rowDataSorted[x][0])];
// ... create a clone of the orignal row, and register it to be inserted in its new place ...
rowToBeInserted[rowToBeInserted.length] = originalRow.cloneNode (true);
// ... and register the original row to be removed, because its place isn't correct anymore
rowToBeRemoved[rowToBeRemoved.length] = originalRow;
}

// reverse order if we sort this column descending
if (order == 'descending') rowToBeInserted.reverse ();

// insert the clones into the table's body
for (var x = 0; x &lt; rowToBeInserted.length; x++)
{
// the following two lines are for the alternate row color
if (x%2) rowToBeInserted[x].setAttribute ('class', 'even');
else rowToBeInserted[x].setAttribute ('class', 'odd');

tbody.appendChild (rowToBeInserted[x]);
}
// remove the original, now superfluous, rows
for (var x = 0; x &lt; rowToBeRemoved.length; x++)
{
tbody.removeChild (rowToBeRemoved[x]);
}

// register a class to the header of the column according to which the table has been sorted, so one can style a ascending and descending sorted column differently
// check if the table uses the thead-element
if (thead = tables[tableNumber].getElementsByTagName ('thead')) headerRow = thead[0].getElementsByTagName ('tr')[0];
// if not, use the first row of this table as header
else headerRow = tables[tableNumber].getElementsByTagName ('tr')[0];

// iterate through all the th-elements, to add the onclick event with the 'sortColumn'-function attached
tableHeaders = headerRow.getElementsByTagName ('th');
for (var columnNumberTwo = 0; columnNumberTwo &lt; tableHeaders.length; columnNumberTwo++)
{
if (columnNumberTwo == columnNumber) tableHeaders[columnNumberTwo].setAttribute ('class', order);
else tableHeaders[columnNumberTwo].setAttribute ('class', '');
}

// remember according to which column from which table we've sorted, and in what order, so when one sorts this column again, we sort it in reverse order
lastTableNumber = tableNumber;
lastColumnNumber = columnNumber;
lastOrder = order;
}

function numeric (foo, bar)
{
valueOne = foo[1];
valueTwo = bar[1];
return valueOne - valueTwo;
}

function normal (foo, bar)
{
x = new Array (foo[1], bar[1]);
x.sort ();
if (x[0] == foo[1]) return -1;
else if (x[0] == x[1]) return 0;
else return 1;
}
</code>

pero meddle me dijo que era sucio (e insincero ;-)) y ademas ahora sin venir a cuento me da un error que dice que thead.0 is null or not a object.

en fin una ayudita para salir del atolladero, por cierto el html que llama a este segundo script es este:

<code>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;sort table rows&lt;/title&gt;
&lt;style type="text/css"&gt;
@import 'stylesheet.css';
&lt;/style&gt;
&lt;script type="text/javascript" src="sortTableRows.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="sortTableRows ();"&gt;
&lt;table width="350" border="0" cellspacing="0" cellpadding="0" class="cabecera"&gt;
&lt;tr&gt;
&lt;td width="30" onClick="sortColumn(1,1);"&gt;ID&lt;/td&gt;
&lt;td width="169" onClick="sortColumn(1,2);"&gt;Song Name&lt;/td&gt;
&lt;td width="95" onClick="sortColumn(1,3);"&gt;Artist&lt;/td&gt;
&lt;td width="56" onClick="sortColumn(1,4);"&gt;Time&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;DIV style="height:150px;WIDTH=380PX;overflow:auto;"&gt;
&lt;table width="350" cellspacing="0" id="fab" &gt;
&lt;THEAD&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/THEAD&gt;
&lt;tbody&gt;

&lt;!-- &lt;tbody style="height:100px;overflow:auto;overflow-y="100""&gt; --&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo" width="25"&gt;2&lt;/td&gt;&lt;td class="cuerpo" width="168"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo" width="94"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo" width="53"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;2&lt;/td&gt;&lt;td class="cuerpo"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;2&lt;/td&gt;&lt;td class="cuerpo"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;2&lt;/td&gt;&lt;td class="cuerpo"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;2&lt;/td&gt;&lt;td class="cuerpo"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;2&lt;/td&gt;&lt;td class="cuerpo"&gt;Another Chance (original mix)&lt;/td&gt;&lt;td class="cuerpo"&gt;Roger Sanchez&lt;/td&gt;&lt;td class="cuerpo"&gt;7.30&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;4&lt;/td&gt;&lt;td class="cuerpo"&gt;At Least We Tried&lt;/td&gt;&lt;td class="cuerpo"&gt;Moby&lt;/td&gt;&lt;td class="cuerpo"&gt;4.08&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;3&lt;/td&gt;&lt;td class="cuerpo"&gt;8 Ball&lt;/td&gt;&lt;td class="cuerpo"&gt;Underworld&lt;/td&gt;&lt;td class="cuerpo"&gt;8.51&lt;/td&gt;&lt;/tr&gt;
&lt;tr OnMouseOver="bgColor='#EBEBE4'" OnMouseOut="bgColor=''" &gt;&lt;td class="cuerpo"&gt;1&lt;/td&gt;&lt;td class="cuerpo"&gt;Happiness Is A Warm Gun&lt;/td&gt;&lt;td class="cuerpo"&gt;Tori Amos&lt;/td&gt;&lt;td class="cuerpo"&gt;9.55&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/DIV&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>