Making WebFX sortable table to work in IE

[Andrus]

I try to use sortable DHTML table from
http://www.webfx.eae.net/dhtml/sortabletable/sortabletable.html

Unfortunately, it does not work correctly in IE due to IE bug.

To reproduce:

1. Run the code from the end of this message in IE.
2. Click in the Price column

Observed result:

Sort icon appears in Item column

Expected result:

Sort icon must appear in Price column

Script autor wrote:

It is a bug in IE. The script works fine in all browsers except IE. The bug
in
IE is that cellIndex returns incorrect values when you hide cells.

From W3C:

cellIndex of type long, readonly
The index of this cell in the row, starting from 0. This index
is in document tree order and not display order.

From MSDN:

Collection indexes are in the source order of the HTML document.
IE does not even follow the MSDN documentation.


Script author refuses to fix it.
He recommands the following fix:

Create a function that looks something like this (too slow to be used in the
regular case)

function getCellIndex(c) {
if (ie)
LOOP and check display
else
return c.cellIndex
}

Unfortunately, I'm new to javascript to implement this.
Can anybody fix this bug and create a modified sortabletable.css file ?

Code to reproduce the problem.
you should also load sortabletable.js and sortabletable.css files from
http://www.webfx.eae.net/dhtml/sortabletable/sortabletable.html

<script type="text/javascript" src="sortabletable.js"></script>
<link type="text/css" rel="StyleSheet" href="sortabletable.css" />
<table class="sort-table" id="table-1" cellspacing="0">
<thead>
<tr>
<td style="display:none">id</td>
<td>Item</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">3</td>
<td>apple</td>
<td>5</td>
</tr>
<tr>
<td style="display:none">2</td>
<td>orange</td>
<td>15</td>
</tr>

</tbody>
</table>

<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("table-1"));
</script></body></html>