Demo: http://jsfiddle.net/fKMqD/
Code:
var rows = $('tr');
rows.eq(0).find('td').sort(function(a, b){
return $.text([a]) > $.text([b]) ? 1: -1;
}).each(function(newIndex){
var originalIndex = $(this).index();
rows.each(function(){
var td = $(this).find('td');
if (originalIndex !== newIndex)
td.eq(originalIndex).insertAfter(td.eq(newIndex));
});
});
No plugins necessary.
Maybe this could help:
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
There is a plugin for jquery called datatable, it is very easy to use like most plugins and does everything you want on the fly with out all the extra work.
check it out.
I got it working thusly
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script>
$(function() {
// Figure out the new column order.
var isWas = {};
$("tr").eq(0).find("td").each(function(index) {
$(this).attr("was", index);
}).sort(function(left, right) {
// Change this line to change how you sort.
return $(left).text() > $(right).text() ? 1 : -1;
}).each(function(index) {
isWas[index] = $(this).attr("was");
});
// Reorder the columns in every row.
$("tr").each(function() {
var tr = $(this);
var tds = tr.find("td");
var newOrder = [];
for (var is = 0; is < tds.length; is++) {
newOrder.push(tds.eq(isWas[is]));
}
for (var is = 0; is < tds.length; is++) {
tr.append(newOrder[is]);
}
});
});
</script>
</head>
<body>
<table>
<tr><td>Potato</td><td>Tomato</td><td>Apple</td></tr>
<tr><td>20g</td><td>10gr</td><td>40gr</td></tr>
</table>
</body>
</html>