Hi,I am doing project in ASP.NET(by VB.NEt).I have created an HTML Table.Now I want to apply sorting to the table in javascript.How can I do this?Any help will be appreciated.Tha nking you!
-
-
This question would be much better answered in the javascript forum, since it no longer has anything to do with .NET
I will move it for you.
MODERATOR -
I don't know how much help you need.
This example allows you to sort a table by clicking in the selected column's header cell. You can also use tab and space (or enter) in IE and Firefox, but more code is needed to make it accessible by keyboard in Opera.
[CODE=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang= "en">
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=utf-8">
<title>HTML Table Sort </title>
<!-- testing code; in use make the script and stylesheet remote files
-->
<script type= "text/javascript" >
function sortColumn(e){
/* the handler calls a sorting function on the targeted cells
*/
var who= window.event ? event.srcElemen t : e.target;
var pa= who.parentNode;
var T= pa,txt;
while(T.nodeNam e != 'TABLE') T= T.parentNode;
var C= T.getElementsBy TagName('captio n')[0];
if(C)txt= who.title.repla ce('Sort','Sort ed');
T= T.getElementsBy TagName('tbody' )[0];
var A= pa.getElementsB yTagName("th");
var L= A.length, count= 0;
while (A[count] != who) ++count;
do_colSort(coun t,T);
if(txt)C.firstC hild.nodeValue= txt;
}
function do_colSort(coun t,T){
/* the sorting method (alphabetical or by price)
is determined by the contents of the first td in the column
You could use class namesto filter the sort in a more complex table
*/
var R= T.getElementsBy TagName("tr");
var L= R.length,RA= [], A= [], tem, funS;
for (var i= 0; i < L; i++){
RA[i]= R[i];
tem= R[i].getElementsByT agName("td")[count];
A[i]= [i,tem.firstChil d.nodeValue];
}
if(/\$/.test(A[0][1])){
funS= function(a, b){
a= parseFloat(a[1].replace(/\D+/g, ""));
b= parseFloat(b[1].replace(/\D+/g, ""));
return a - b;
}
}
else{
funS= function(a, b){
a= a[1].toLowerCase();
b= b[1].toLowerCase();
if (a== b) return 0;
if (a > b) return 1;
return -1;
}
}
A.sort(funS);
for (var i= 0; i < L; i++){
tem= A[i][0];
T.appendChild(R A[tem]);
}
}
onload= function(){
/* assign event handlers to the thead cells,
if it has a class name including 'sortable'
*/
if(document.cre ateTextNode){
var t= document.getEle mentsByTagName( 'thead')[0];
if(t.className. indexOf('sortab le')==-1) return;
t= t.getElementsBy TagName('th');
var L= t.length,who;
for(var i= 0;i<L;i++){
who= t[i];
if(who.classNam e && /nosort/i.test(who.clas sName)) continue;
who.onclick= sortColumn;
who.onmouseover = who.onfocus= function(e){
e= window.event?ev ent.srcElement: e.target;
e.style.color= 'red'
};
who.onmouseout= who.onblur= function(e){
e= window.event?ev ent.srcElement: e.target;
e.style.color= ''
};
who.title= 'Sort by '+who.firstChil d.nodeValue;
who.tabIndex= 1;
who.onkeypress= who.onclick;
}
var C= document.getEle mentsByTagName( 'caption')[0];
if(C)C.firstChi ld.nodeValue= 'Sort by column';
}
}
</script>
<style type= "text/css">
body{font-size:120%;margi n:1ex 1em;color:black ;background:whi te;font-family:"Times New Roman", serif}
table{border:ri dge black 3px;background-color:white;fon t-size:1.1em;widt h:50%}
td,th{border:so lid black 1px;padding:2px ;width:33%}
.sortableClass th{cursor:point er}
thead,tfoot{bac kground-color:#eee;font-size:1.1em;font-weight:bold;tex t-align:center}
caption{font-weight:bold}
</style>
</head>
<body>
<h1 id= "firstH1" style="margin-top:2em">HTML Elements</h1>
<h2>Sorting Table Elements</h2>
<div>
<table>
<caption>Thre e Column Table</caption>
<thead class= "sortableClass" >
<tr>
<th>Make</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ford</td><td>Truck</td><td>$23,000</td>
</tr>
<tr>
<td>Subaru</td><td>Wagon</td><td>$21,000</td>
</tr>
<tr>
<td>Kia</td><td>Compact</td><td>$13,000</td>
</tr>
<tr>
<td>Lexus</td><td>Sedan</td><td>$35,000</td>
</tr>
<tr>
<td>Honda</td><td>SUV</td><td>$26,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>[/CODE]Comment
-
How to sort HTML table in javascript
Hi,I am doing project in ASP.NET(by VB.NEt).I have created an HTML Table.Now I want to apply sorting to the table in javascript.How can I do this?Any help will be appreciated.Tha nking you!Comment
-
Your thread had already been moved to the JavaScript forum and answered. I've merged the threads.
Moderator.Comment
Comment