SubSelect of Table, rowIndex, sort and other fun

[awebguynow]

Most JS people have seen sorttable.js and similar implementations.
I'm trying to do a SubSelect of an existing table, restricting values
in a Column to spec. range.

Rows manipulated through sorttable are not copies of the row objects,
they are ref's to the tbl row. Therefore care must be taken not to
delete them if they are needed, etc.

I'm getting used to the API:
tbody.deleteRow(rowIndex)
tbody.insertBefore(oRowI, oRowJ);
tbody.replaceChild(oRowI, oRowJ);
tbody.appendChild(row)

At some point during sort, the rowIndex gets re-ordered, I'm just not
sure when.

One strange result in my testing (possibly programmer error) of
deleteRow()
for (var k=0; k<telem.tBodies[0].rows.length; k++)
telem.tBodies[0].deleteRow(k);
Seemed to only delete aprx. 1/2 of the rows, must be because length was
changing
I had better results using starting with length and using decrement
k--

http://terrill.ca/sorting/ had good ref to "Exchanging HTML Table
Rows"
and also covered the gotcha topic of problems exchanging rows when one
is the last row and becomes undefined [ this I dodn't fully understand
yet ] occurs when rows have non-consecutive rowIndex's

Has anyone come on similar problems or have a better understanding of
this ?
There's certainly some nuances involved.

 

[awebguynow]

I'll be working on a solution, but would welcome any other's input on
this as well.

 

[RobG]

Most JS people have seen sorttable.js and similar implementations.
I'm trying to do a SubSelect of an existing table, restricting values
in a Column to spec. range.

Rows manipulated through sorttable are not copies of the row objects,
they are ref's to the tbl row. Therefore care must be taken not to
delete them if they are needed, etc.

I'm getting used to the API:
tbody.deleteRow(rowIndex)
tbody.insertBefore(oRowI, oRowJ);
tbody.replaceChild(oRowI, oRowJ);
tbody.appendChild(row)

The DOM interfaces relating to tables are documented here:

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425 >

Note that there are a number of them relating to table sections,
captions, rows, etc. The delete and replace methods return a reference
to the deleted/replaced row.

At some point during sort, the rowIndex gets re-ordered, I'm just not
sure when.

The rows collection is live, that is, it is updated as you modify it.
Say you have 3 rows with index 0, 1, 2. The moment you remove row 1
from the table section it belongs to (say by deleting it or moving it
elsewhere), row 2 becomes row 1.

One strange result in my testing (possibly programmer error) of
deleteRow()
for (var k=0; k<telem.tBodies[0].rows.length; k++)
telem.tBodies[0].deleteRow(k);
Seemed to only delete aprx. 1/2 of the rows, must be because length was
changing

The length is changing but that's not why you are skipping every second
row - that happens and because you are incrementing k at the same time
as deleting rows. When k = 0 and you delete row[k], all the other rows
shuffle up, so row[1] becomes row[0]. On the next loop when you delete
row[1] you are deleting the row that was row[2] but moved to row[1]
when you deleted row[0], and so on.

I had better results using starting with length and using decrement
k--

Because deleting the last row each time doesn't cause the row indexes
to change. BTW, you only need to get the length once, not on every
loop:

var k = telem.tBodies[0].rows.length;
while (k--){
telem.tBodies[0].deleteRow(k);
}

A general solution is to use a function that removes all child nodes
from the element passed to it:

removeChildNodes(telem.tBodies[0]):

function removeChildNodes(el){
while (el.firstChild){
el.removeChild(el.firstChild);
}
}

http://terrill.ca/sorting/ had good ref to "Exchanging HTML Table
Rows"
and also covered the gotcha topic of problems exchanging rows when one
is the last row and becomes undefined [ this I dodn't fully understand
yet ] occurs when rows have non-consecutive rowIndex's

That example makes a number of assumptions that may not be applicable
in all cases.

Here's a swapRows() function that doesn't care what order you pass the
rows in or where they are in the table, or even if they are in the same
table section - they can be in different tables (a and b are references
to table rows):

<script type="text/javascript">

function swapRows(a, b){
var bP = b.parentNode;
var bS = b.nextSibling;
a.parentNode.insertBefore(b, a.nextSibling);
bP.insertBefore(a, bS);
}

if a or b are the last row in the table (or their table section), their
next sibling will be null and insertBefore will insert after the last
child (i.e. as the last row). The methods used are DOM 1 Core so it
should be very widely supported - it works in IE and Firefox at least.

Has anyone come on similar problems or have a better understanding of
this ?
There's certainly some nuances involved.

It's pretty straight forward if you remember that the rows collection
is live - that is, every time you do something to it, the changes are
reflected in the collection immediately even though they aren't made
visible until after the function finishes.