code to sort a table

X

xah

i'm just starting out on javascript.

can anyone show me how to go about writing a code to sort a table
column?

something like the following:

<table border="1">
<tr>
<td>
<a href="" onClick="">sort me</a>
</td>
<tr>
<tr>
<td>
2
</td>
<tr>
<tr>
<td>
3
</td>
<tr>
<tr>
<td>
1
</td>
<tr>
</table>

i'm guessing that the code would first read in the table entries as
documents.table.[1].??, assign it as a array, then sort, then delete
the table text, then print the table text.

How to delete the table text?

eventually this would be for a multi-column and multi-row table (a
matrix), and each row or column can be clicked to sort, without
disturbing existing order. The click would act as toggle or reverse
sorting.

Xah
(e-mail address removed)
∑ http://xahlee.org/
 
J

Janwillem Borleffs

i'm just starting out on javascript.

can anyone show me how to go about writing a code to sort a table
column?
Click to expand...

That's the same as trying to ride the Tour de France the first time you are
learning to ride a bike.

Start reading the FAQ (http://jibbering.com/FAQ/) and try something simpler.
something like the following:

<table border="1">
<tr>
<td>
<a href="" onClick="">sort me</a>
</td>
<tr>
<tr>
Click to expand...

Perhaps you should start to learn some basic HTML too; the above snippet is
not valid HTML because of the non-closed said:
i'm guessing that the code would first read in the table entries as
documents.table.[1].??, assign it as a array, then sort, then delete
the table text, then print the table text.

How to delete the table text?
Click to expand...

Just to give you an idea what's involved, here is an example of how you
could do it:

<script type="text/javascript">
function sortTable() {
var tds = document.getElementsByTagName('TD');
var content = [], val;
for (var i = 1; i < tds.length; i++) {
if (val = tds.innerHTML.replace('/[^\d]+/g','')) {
content[i - 1] = val;
}
}

content.sort();
for (var i = 1; i < tds.length; i++) {
tds.innerHTML = content[i - 1];
}
}
</script>
</head>

<body>
<table border="1">
<tr>
<td>
eventually this would be for a multi-column and multi-row table (a
matrix), and each row or column can be clicked to sort, without
disturbing existing order. The click would act as toggle or reverse
sorting.
Click to expand...

As said before, learn the language first.


JW
 
J

Jim Davis

i'm just starting out on javascript.

can anyone show me how to go about writing a code to sort a table
column?

I assume you don't really mean to "sort the column" but rather to sort ON
the table column, right? In other words when somebody clicks your control
all the rows should move as single units rather than JUST the column data,
right?

If so then don't both sorting the column - it's messy and annoying to work
with the DOM to fetch values and such.

Instead create a sortable data structure representing your table - probably
an array of objects. A single function would display the table from this
structure. Your control would perform the sort on the structure, then call
the "display" function.

I've an abstraction object that could help here (long URL):

http://www.depressedpress.com/depre...t/Extensions/DP_ObCollectionOrdered/Index.cfm

It abstracts the processing of an array of objects allowing you to create
them, add and delete from them, sort them, shuffle the contents, etc.

There's an example at the bottom of that page that shows you how to create
and sort a table in this way. You may be able to modifiy to your needs
easily enough.

Hope this helps,

Jim Davis
 
J

Jim Davis

ASM said:
sorting a table is not possible if you are starting ...
Click to expand...

Well... perhaps a better way to say it is that if you end up being able to
sort a table then you're not starting out anymore. ;^)
http://www.kryogenix.org/code/browser/sorttable/
http://www.mattkruse.com/javascript/sorttable/index.html
Click to expand...

For what it's worth both of those example seem a lot more complex than they
need to be for the task - although they both, of course, worth just fine.
Regardless of how complex they are however they both provide decent
abstractions of that complexity so are useful to beginners.

Personally I don't see the utility of using the HTML of the table as the
data storage mechanism. I think thats what makes so many of these solutions
as complex as they are. Managing and sorting the data seprately from the
presentation is so very much simpler.

Jim Davis
 
A

ASM

Jim said:
Well... perhaps a better way to say it is that if you end up being able to
sort a table then you're not starting out anymore. ;^)
:)


For what it's worth both of those example seem a lot more complex than they
need to be for the task - although they both, of course, worth just fine.
Regardless of how complex they are however they both provide decent
abstractions of that complexity so are useful to beginners.

Personally I don't see the utility of using the HTML of the table as the
data storage mechanism.
Click to expand...

Question was : how to sort a table
on my idea the table is pre-existing
and to sort only on TD.innerHTML or TH is it less complex ?

Of course if you display a JS matrix in a table via document.write() or
else this way, it is a little simplier :
http://perso.wanadoo.fr/stephane.moriaux/truc/tri_matrice.htm

I think thats what makes so many of these solutions
as complex as they are. Managing and sorting the data seprately from the
presentation is so very much simpler.
Click to expand...

I continue to think that function to sort a matrix is not easy to understand
could be seen here:
<http://groups.google.com/group/fr.comp.lang.javascript/msg/1ca86e2439894ee6?rnum=1>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Sort by number of characters 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Filter table rows based on multiple checkboxes value 2
How to add dropdown selected data to table using jquery 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Getting extra blank rows from appending HTML..? 2
Sort by number of characters 0
Grouping messages that have similarities 2

Members online

Total: 68 (members: 1, guests: 67)
Robots: 225

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top