Groups | Blog | Home
all groups > dotnet jscript > november 2005 >

dotnet jscript : Need ideas for sorting a table



Brian Kitt
11/29/2005 6:53:03 PM
I have a website that displays data in a table. It takes about 30 seconds to
build the display from the server because of the amount of cpu and data
access needed to build the table. Each row of the table itself consists of a
variable number of elements, including zero or more tables.

My customer wants to be able to click on a button and sort the resulting
table. They don't want me to go back to the server to rebuild the table
because of the time it takes to build the table, they want it sorted in place.

Problem I am running into, is trying to figure out how to swap rows in the
table. I have a unique id for each row in the table, but because the rows
are so complex, everything I have tried so far just results in runtime errors.

I've tried the following: (given Row1 and Row2 need to be swapped)
Row1.innerHTML = Row2.innerHTML = Results in run time error
Row1.outerHTML = Row2.outerHTML = Results in run time error
Row1 = Row2 = no error, but seems to have no effect
Row1.innerText = Row2.innerText = not an option because of the complexity.
I've tried looping through childNodes of Row1 and setting them to childNodes
of Row2, but the problem I run into, is that Row1 and Row2 are not guaranteed
to have the same number of childNodes, and this results in failure as well.

Bruce Barker
11/30/2005 10:16:56 AM
the trick is to reinsert the rows with appendChild(). if you put a tbody on
the table it will be easier to find the starting row.

<html>
<body>
<script>
function reverse(table) {
var tbody = table.tBodies[0];
var rows = tbody.childNodes;
var a = new Array();
for (var i=0; i<rows.length; i++) {
a[i] = rows[i];
}
for (var i=a.length-1; i > -1; --i) {
tbody.appendChild(a[i]);
}
}
</script>
<table id=foo onclick="reverse(this)">
<thead>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
</thead>
<tbody>
<tr><td>a1</td><td>b1</td><td>c1</td>
<tr><td>a2</td><td>b2</td><td>c2</td>
<tr><td>a3</td><td>b3</td><td>c3</td>
</tbody>
</table>
<body>
</html>


-- bruce (sqlwork.com)


[quoted text, click to view]

Brian Kitt
11/30/2005 1:54:34 PM
Thanks. I'm going to work on this tonight, and let you know if this does the
trick for me.

[quoted text, click to view]
AddThis Social Bookmark Button