To illustrate how the DOM can
be traversed and changed dynamically, it is proposed a TableSorter class.
??‘
??‘
??‘
??‘
??‘
??‘
??‘
401
Chapter 14: More Interactive Content with JavaScript
Table Sorting
A standard table element in an HTML page can be enhanced adding sorting capabilities. The sorting
action is triggered clicking on the heading of each column; the default sorting direction is ascending but
on the second and further clicks, the direction is reversed. The columns are ordered by default using a
string comparison, the behavior can be changed using the setParser() function that accept the column
index as the first argument and a function that converts a string value to Dynamic as the second
argument. When the table values are parsed (just once on the first order action), they are stored in an
array, the private data field. Each element in the array contains a reference to the row in the DOM tree,
the tr element, and an array of values that are the contents of each cell, the td elements; those values are
transformed by the parser function if it exists and are used for sorting purposes.
Pages:
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759