P
Prabhuram
Hi All, I am a newbie to javascript. I have the following code which
sorts any html table perfectly. The JS function 'sortIt()' is invoked
in the onClick event in <tr>. I want the same functionality to be done
from invoking in table header<th>. Any help is appriciated. Thanks in
advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sortare ascendenta/descendenta pe coloane</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
tr {
background-color: #CCCCCC;
}
..tr1 {
background-color: #F5F5F5;
}
..tr2 {
background-color: #E5E5E5;
}
-->
</style>
<script type="text/JavaScript">
//Genuine code by Corneliu Lucian 'KOR' Rusu -- mailto:[email protected]
function sortIt(w){
var
r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//colectia de clone linii
var iRows = new Array()//matricea indexurilor liniilor
for(var i=1;i<r.length;i++){
oRows=r.cloneNode(true);//cloneaza liniile
iRows=r.rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=0;i<iRows.length;i++){
var v = r.cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol=[v,iRows];
vCol=[v,iRows];
}
oCol.shift();
vCol.shift();
sCol = oCol.sort(function(oCol,sCol){return oCol[0] == sCol[0] ? 0
: (oCol[0] < sCol[0] ? -1 : 1)});
if(vCol.toString()==sCol.toString()){sCol.reverse()}// switcher
descendent/ascendent
var q=1;
for(var i=1;i<r.length;i++){//rescrie liniile
r.parentNode.replaceChild(oRows[sCol[i-1][1]],r);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r.className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.gif','none.gif'];//url-ul relativ al
sagetilor
var allS =r[0].getElementsByTagName('img');
var sag = w.getElementsByTagName('img')[0];
var url
=(sag.getAttribute('src').indexOf(s[1])>-1||sag.getAttribute('src').indexOf(s[2])>-1)?s[0]:s[1];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS!=sag){allS.setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td width="33%"><strong>Firma</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
<td width="33%"><strong>Localitatea</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
<td width="34%"><strong>Niste cifre</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
</tr>
<tr class="tr1">
<td>Boul zbucuimat</td>
<td>Draganesti-Olt</td>
<td>40 de euroi</td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>Craiova</td>
<td>20 coco</td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>Baia Mare</td>
<td>1000</td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>Arad</td>
<td>30</td>
</tr>
<tr class="tr2">
<td>Boul nezbucuimat</td>
<td>Baia Mica</td>
<td>500</td>
</tr>
</tbody>
</table>
</body>
</html>
sorts any html table perfectly. The JS function 'sortIt()' is invoked
in the onClick event in <tr>. I want the same functionality to be done
from invoking in table header<th>. Any help is appriciated. Thanks in
advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sortare ascendenta/descendenta pe coloane</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
tr {
background-color: #CCCCCC;
}
..tr1 {
background-color: #F5F5F5;
}
..tr2 {
background-color: #E5E5E5;
}
-->
</style>
<script type="text/JavaScript">
//Genuine code by Corneliu Lucian 'KOR' Rusu -- mailto:[email protected]
function sortIt(w){
var
r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//colectia de clone linii
var iRows = new Array()//matricea indexurilor liniilor
for(var i=1;i<r.length;i++){
oRows=r.cloneNode(true);//cloneaza liniile
iRows=r.rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=0;i<iRows.length;i++){
var v = r.cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol=[v,iRows];
vCol=[v,iRows];
}
oCol.shift();
vCol.shift();
sCol = oCol.sort(function(oCol,sCol){return oCol[0] == sCol[0] ? 0
: (oCol[0] < sCol[0] ? -1 : 1)});
if(vCol.toString()==sCol.toString()){sCol.reverse()}// switcher
descendent/ascendent
var q=1;
for(var i=1;i<r.length;i++){//rescrie liniile
r.parentNode.replaceChild(oRows[sCol[i-1][1]],r);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r.className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.gif','none.gif'];//url-ul relativ al
sagetilor
var allS =r[0].getElementsByTagName('img');
var sag = w.getElementsByTagName('img')[0];
var url
=(sag.getAttribute('src').indexOf(s[1])>-1||sag.getAttribute('src').indexOf(s[2])>-1)?s[0]:s[1];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS!=sag){allS.setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td width="33%"><strong>Firma</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
<td width="33%"><strong>Localitatea</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
<td width="34%"><strong>Niste cifre</strong> <a href="#"
onclick="sortIt(this);return false"><img src="none.gif"
border="0"></a></td>
</tr>
<tr class="tr1">
<td>Boul zbucuimat</td>
<td>Draganesti-Olt</td>
<td>40 de euroi</td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>Craiova</td>
<td>20 coco</td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>Baia Mare</td>
<td>1000</td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>Arad</td>
<td>30</td>
</tr>
<tr class="tr2">
<td>Boul nezbucuimat</td>
<td>Baia Mica</td>
<td>500</td>
</tr>
</tbody>
</table>
</body>
</html>