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="JavaScript">
function generate_compare_rows(column)
{
return function compare_rows(row1, row2) {
var value1 = row1.cells[column].firstChild.nodeValue;
var value2 = row2.cells[column].firstChild.nodeValue;
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
function sort_list(table_id, column)
{
var list_table = document.getElementById(table_id);
// Exclude other tables
var dom_rows = list_table.getElementsByTagName("tr");
var num_dom_rows = dom_rows.length;
var table_rows = [];
var table_parent = list_table.parentNode;
for (var i=0; i < num_dom_rows; i++) {
table_rows[i] = dom_rows[i];
}
var header_row = table_rows.shift();
var num_rows = table_rows.length;
table_rows.sort(generate_compare_rows(column));
var new_table = document.createElement("table");
new_table.appendChild(header_row);
for (var i=0; i < num_rows; i++) {
new_table.appendChild(table_rows[i]);
}
if (document.addEventListener) { // Test for standard.
new_table.setAttribute("id", table_id);
table_parent.replaceChild(new_table, list_table);
} else { // Must be IE :) Try something different.
new_table.id = table_id;
table_parent.removeChild(list_table);
table_parent.appendChild(new_table);
}
}
</script>
</head>
<body>
<h1>My Table</h1>
<div id="list_div">
<table id="list">
<tr style="cursor:pointer">
<th onclick="sort_list('list', '0')">Name</th>
<th onclick="sort_list('list', '1')">Description</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>
