Hello -
I'm trying to implement a table that will allow the user to sort on
each column, like many applicaitons that have tabular data (e-mail,
song list, etc). It invovles grabbing the table, putting the rows into
an array, then sorting them based on which column was clicked. Then a
new table (DOM createElement) is constructed, adding in the sorted rows
with appendChild. Then the attempt is to replace the old table with
the new table. Of course, this works fine under DOM-compliant browsers
(at least, under Mozilla, Firefox, and Opera), but under IE the table
is removed and never replaced. I will include some basic code,
stripped down from the original that does demonstrate the problem. It
seems that when the rows from the old table are appended to the new one
(through DOM), they are removed from the client visual field. In
DOM-compliant browsers, they are replaced with the subsequent
replaceChild, but not in IE6. I even tried removeChild, then
appendChild; however it is done, IE doesn't re-display the data. The
table disappears. Anyway, I'm probably not explaining this very well,
and am most assuredly missing something, so without further delay,
here's my code for the experts to critique and laugh at :).. :
<html>
<head>
<title>This is a Sort Test</title>
<script type="text/javascript" language="JavaS cript">
function generate_compar e_rows(column)
{
return function compare_rows(ro w1, row2) {
var value1 = row1.cells[column].firstChild.nod eValue;
var value2 = row2.cells[column].firstChild.nod eValue;
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
function sort_list(table _id, column)
{
var list_table = document.getEle mentById(table_ id);
// Exclude other tables
var dom_rows = list_table.getE lementsByTagNam e("tr");
var num_dom_rows = dom_rows.length ;
var table_rows = [];
var table_parent = list_table.pare ntNode;
for (var i=0; i < num_dom_rows; i++) {
table_rows[i] = dom_rows[i];
}
var header_row = table_rows.shif t();
var num_rows = table_rows.leng th;
table_rows.sort (generate_compa re_rows(column) );
var new_table = document.create Element("table" );
new_table.appen dChild(header_r ow);
for (var i=0; i < num_rows; i++) {
new_table.appen dChild(table_ro ws[i]);
}
if (document.addEv entListener) { // Test for standard.
new_table.setAt tribute("id", table_id);
table_parent.re placeChild(new_ table, list_table);
} else { // Must be IE :) Try something different.
new_table.id = table_id;
table_parent.re moveChild(list_ table);
table_parent.ap pendChild(new_t able);
}
}
</script>
</head>
<body>
<h1>My Table</h1>
<div id="list_div">
<table id="list">
<tr style="cursor:p ointer">
<th onclick="sort_l ist('list', '0')">Name</th>
<th onclick="sort_l ist('list', '1')">Descripti on</th>
</tr>
<tr>
<td>John Michaels</td>
<td>Somone with another grudge.</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>Another guy wanting a job.</td>
</tr>
<tr>
<td>Aaron Doe</td>
<td>Dude, this guy is crazy.</td>
</tr>
</table>
</div>
</body>
</html>
