...

View Full Version : Dynamic table with javascript



willjs
12-28-2005, 11:10 AM
Hello!

Well, I need to make a table with javascript. But, this table must be dynamic.

The heading must be a filter and when I click in the filter, the table change the order in accordance with the filter.

Somebody help me. :confused:

Sorry, because my english not is good :(

William

Kor
12-28-2005, 11:57 AM
Something like this (see also attachment):


<!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:cornel@mc.ro
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[i]=r[i].cloneNode(true);//cloneaza liniile
iRows[i]=r[i].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[i].cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.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[0])>-1)?s[1]:s[0];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS[i]!=sag){allS[i].setAttribute('src',s[0])}
}
}
</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="desc.gif" border="0"></a></td>
<td width="33%"><strong>Localitatea</strong> <a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td width="34%"><strong>Niste cifre</strong> <a href="#" onclick="sortIt(this);return false"><img src="desc.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>

Sorry, the comments are in my language, in Romanian, I had no time to translate them, but they are not important.

willjs
12-28-2005, 01:40 PM
Tks my friend!
You helped a lot!
Will

Kor
12-28-2005, 03:42 PM
If any adjustments, I am ready for some help. I forgot that Portuguese is very close with Romanian (in fact I have not noticed that u are from Brasil), so that you migth have understood the comments... :cool:

willjs
12-29-2005, 12:55 PM
Tks again... lol...
So, I believe that we can to talk about programming, Romania and Brasil more times.
My msn is: william_js@msn.com

willjs
12-29-2005, 03:44 PM
Hi,

I've had a problem with the filters that you sent me. The fields type date, currency and hyperlink do not function.

Do you know what I have to do?

Tks
Will

Kor
12-29-2005, 03:53 PM
put the code here

willjs
12-29-2005, 04:09 PM
Look the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sugest&#227;o de Compra</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;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9; }
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight:bold }
-->
</style>
<script type="text/JavaScript">
//Genuine code by Corneliu Lucian 'KOR' Rusu -- mailto:cornel@mc.ro
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[i]=r[i].cloneNode(true);//cloneaza liniile
iRows[i]=r[i].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[i].cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.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[0])>-1)?s[1]:s[0];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS[i]!=sag){allS[i].setAttribute('src',s[0])
}
}
}
</script>
</head>
<body>
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td class="style9">Iten<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Descricao<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Fantasia<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Embalagem<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Pre&#231;o de Venda</td>
<td class="style9">Disponivel<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Reserva<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Futuro</td>
<td class="style9">MDV<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Dispon&#237;vel<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Max.<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Min.<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DT ULT ENT</a></td>
<td class="style9">QTD ULT ENT<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Qtde Comprar<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+1<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+2<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+3<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+4<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+5<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+6<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+7<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+8<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+9<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+10<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
</tr>
<%
v_contador = 0
While Not rs.eof
If v_contador MOD 2 = 0 Then
vcor = "tr" + "1"
Else
vcor = "tr" + "2"
End if
%>
<tr class="<%=vcor%>">
<td class="style3"><%=rs("coditprod")%></td>
<td class="style3"><%=rs("descricao")%></td>
<td class="style3"><%=rs("fantasia")%></td>
<td class="style3"><%=rs("embalagem")%></td>
<td class="style3"><%=replace(formatcurrency(rs("preco_venda"),2),",",".")%></td>
<td class="style3"><%=replace(formatnumber(rs("disponivel"),3),",",".")%></td>
<td class="style3"><%=replace(formatnumber(rs("resfis"),3),",",".")%></td>
<td class="style3">
<%
If formatnumber(rs("futuro"),3) > 0 Then
%>
<a href="javascript:abrir('<%=rs("coditprod")%>');"><%=replace(formatnumber(rs("futuro"),3),",",".")%></a>
<%
Else
%>
<%=replace(formatnumber(rs("futuro"),3),",",".")%>
<%
End If
%>
</td>
<td class="style3"><%=replace(formatnumber(rs("mdv"),3),",",".")%></td>
<td class="style3"><%=replace(formatnumber(rs("ddv_disponivel"),3),",",".")%></td>
<td class="style3"><%=replace(rs("maxddv"),",",".")%></td>
<td class="style3"><%=replace(rs("minddv"),",",".")%></td>
<td class="style3"><%=replace(rs("DTULTENT"),",",".")%></td>
<td class="style3"><%=replace(formatnumber(rs("QTDULTENT"),3),",",".")%></td>
<td class="style3"><%=replace(formatnumber(rs("qtde_comprar"),3),",",".")%></td>
<%if formatnumber(rs("d1"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d1"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d2"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d2"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d3"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d3"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d4"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d4"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d5"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d5"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d6"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d6"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d7"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d7"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d8"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d8"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d9"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d9"),0),",",".")%></td>
<%end if%>
<%if formatnumber(rs("d10"),0) = "0" then%>
<td class="style3">&nbsp;</td>
<%else%>
<td class="style3"><%=replace(formatnumber(rs("d10"),0),",",".")%></td>
<%end if%>
</tr>
<%
v_contador = v_contador + 1
rs.Movenext
Wend
%>
</tbody>
</table>
<br>
<center>
<input type='button' value='Voltar' onclick="javascript:location.href='rel_sugestao_compra.asp';">
</center>
</Form>
</body>
</html>

willjs
01-02-2006, 11:56 AM
I've cleaned this code. The asp codes are between < >. I've had a few problems with currency, hyperlink and date files. My comments about this files are between <!-- -->.

Can somebody help me?

--------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sugest&#227;o de Compra</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;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9; }
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight:bold }
-->
</style>
<script type="text/JavaScript">
//Genuine code by Corneliu Lucian 'KOR' Rusu -- mailto:cornel@mc.ro
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[i]=r[i].cloneNode(true);//cloneaza liniile
iRows[i]=r[i].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[i].cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
oCol.shift();
vCol.shift();
//sCol = oCol.sort(function(oCol,sCol){return oCol[0] == sCol[0] ? 0 : (oCol[0] < sCol[0] ? -1 : 1)});
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[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.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[0])>-1)?s[1]:s[0];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS[i]!=sag){allS[i].setAttribute('src',s[0])
}
}

</script>
</head>
<body>
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td class="style9">Iten<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Descricao<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Fantasia<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Embalagem<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>

<td class="style9">Pre&#231;o de Venda</td> <!-- filter don't function -->

<td class="style9">Disponivel<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Reserva<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>

<td class="style9">Futuro</td> <!-- filter don't function -->

<td class="style9">MDV<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Dispon&#237;vel<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Max.<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DDV Min.<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">DT ULT ENT</a></td>
<td class="style9">QTD ULT ENT<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">Qtde Comprar<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+1<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+2<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+3<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+4<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+5<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+6<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+7<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+8<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+9<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td class="style9">D+10<a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
</tr>

<tr class="<%=asp code%>">
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><a href="javascript:openPopup('<asp code>');"><asp code></a></td> <!-- Put the hyperlink -->
<td class="style3"><%asp code%>/td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3"><%asp code%></td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
<td class="style3">&nbsp;</td>
</tbody>
</table>
<br>
<center>
<input type='button' value='Voltar' onclick="javascript:location.href='rel_sugestao_compra.asp';">
</center>
</Form>
</body>
</html>

Kor
01-03-2006, 10:41 AM
So... the problem is that you have a hypelink in one of the cells?

willjs
01-03-2006, 11:58 AM
Yes,

This is one of problems. The cells with hyperlink, currency and date the filters don't function very well. :confused:

Kor
01-04-2006, 05:15 PM
ok now... Here's what I have done so far... The currency is not sorted ok, so that I need to know how all your currency strings will appear on cell. Will they be xx NNNNN or xxx NNNNN ... I need to know that:

Now, so far here's the code:


<!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:cornel@mc.ro
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[i]=r[i].cloneNode(true);//cloneaza liniile
iRows[i]=r[i].rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=1;i<iRows.length;i++){
var kid = r[i].cells[q].firstChild;
if(r[i].cells[q].firstChild.nodeType==1){
var v= kid.firstChild.nodeValue;
}
else{
var v = kid.nodeValue;
if(v.indexOf('/')!=-1){
v=v.split('/');
v = new Date(v[2],v[1],v[0])
}
if(Number(v)){v=Number(v)}
}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r[i].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[i]!=sag){allS[i].setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="600" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td width="33%" height="27"><strong>String</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td width="33%"><strong>Currency</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td width="34%"><strong>Date(dd/mm/yy)</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td width="34%"><strong>URL</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>$d 1000.89</td>
<td>30/01/2005</td>
<td><a href="http://www.google.com">Google</a></td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>$d 500.21</td>
<td>11/03/2006</td>
<td><a href="http://www.mc.ro">Media Concept</a></td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>$d 1200.01</td>
<td>06/12/1999</td>
<td><a href="http://www.altavista.com">Altavista</a></td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>$d 300.54</td>
<td>11/05/2000</td>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
</tr>
<tr class="tr1">
<td>Boul nezbucuimat</td>
<td>$d 80.19</td>
<td>29/01/2005</td>
<td><a href="http://www.cnn.com">CNN</a></td>
</tr>
</tbody>
</table>
</body>
</html>


The currecy problem remained to be solve, so I wait for the details.

SpirtOfGrandeur
01-04-2006, 06:57 PM
I would like to take a quick time out to say good job Kor for helping this guy out!

willjs
01-04-2006, 07:02 PM
I haven't more problems with date and hyperlinks files. About currency, I'll show below more details.

Examples - I can have:

-4
-359,25
0,00
12,00
1.050,13
352.653,25

Can I use the symbol R$ before the numbers? :confused:

Kor
01-05-2006, 08:47 AM
Ok, one more question: will every currency have R$ in front?
I mean... there will be always?

R$ -4
R$ -359,25
R$ 0,00
R$ 12,00
R$ 1.050,13
R$ 352.653,25

(in fact I guess that is not quite important... Important is that I have to remove the dot and to replace comma with a dot, in my array's elements, to be able to sort the values... Still it will be useful for me to know that)

Kor
01-05-2006, 11:15 AM
What about this?


<!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:cornel@mc.ro
function sortIt(w){
var r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//collection of rows clones
var iRows = new Array()//indexes of cells
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);//clone the rows
iRows[i]=r[i].rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=1;i<iRows.length;i++){
var kid = r[i].cells[q].firstChild;
if(r[i].cells[q].firstChild.nodeType==1){
var v= kid.firstChild.nodeValue;
}
else{
var v = kid.nodeValue;
if(v.indexOf('/')!=-1){
v=v.split('/');
v = new Date(v[2],v[1],v[0])
}

else if(v.indexOf('$d')!=-1){
v = v.split(' ')[v.split(' ').length-1];
v = v.replace('.','').replace(',','.');
}
if(Number(v)){v=Number(v)}
}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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++){//re-write the rows
r[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START keeps zebra
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END keeps zebra
}
//switches the arrows
var s =['desc.gif','cres.gif','none.gif'];//relative url of the arrows
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++){//resets the other arrows
if(allS[i]!=sag){allS[i].setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="600" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><strong>String</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Currency</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Date(dd/mm/yy)</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>URL</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>$d 10.000,89</td>
<td>30/01/2005</td>
<td><a href="http://www.google.com">Google</a></td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>$d 500,21</td>
<td>11/03/2006</td>
<td><a href="http://www.mc.ro">Media Concept</a></td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>$d 1.200,01</td>
<td>06/12/1999</td>
<td><a href="http://www.altavista.com">Altavista</a></td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>$d 300,54</td>
<td>11/05/2000</td>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
</tr>
<tr class="tr1">
<td>Boul nezbucuimat</td>
<td>$d - 8</td>
<td>29/01/2005</td>
<td><a href="http://www.cnn.com">CNN</a></td>
</tr>
</tbody>
</table>
</body>
</html>

Kor
01-05-2006, 11:51 AM
It works ok for me with the values you have gave me: have a look:


<!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:cornel@mc.ro
function sortIt(w){
var r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//collection of rows clones
var iRows = new Array()//indexes of cells
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);//clone the rows
iRows[i]=r[i].rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=1;i<iRows.length;i++){
var kid = r[i].cells[q].firstChild;
if(r[i].cells[q].firstChild.nodeType==1){
var v= kid.firstChild.nodeValue;
}
else{
var v = kid.nodeValue;
if(v.indexOf('/')!=-1){
v=v.split('/');
v = new Date(v[2],v[1],v[0])
}

else if(v.indexOf('$d')!=-1){
v = v.split(' ')[v.split(' ').length-1];
v = v.replace('.','').replace(',','.');
}
if(Number(v)){v=Number(v)}
}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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++){//re-write the rows
r[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START keeps zebra
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END keeps zebra
}
//switches the arrows
var s =['desc.gif','cres.gif','none.gif'];//relative url of the arrows
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++){//resets the other arrows
if(allS[i]!=sag){allS[i].setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="600" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><strong>String</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Currency</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Date(dd/mm/yy)</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>URL</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>$d 16,949<br></td>
<td>30/01/2005</td>
<td><a href="http://www.google.com">Google</a></td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>$d 164,1020</td>
<td>11/03/2006</td>
<td><a href="http://www.mc.ro">Media Concept</a></td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>$d 2,993<br></td>
<td>06/12/1999</td>
<td><a href="http://www.altavista.com">Altavista</a></td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>$d 2.190,000<br></td>
<td>11/05/2000</td>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
</tr>
<tr class="tr1">
<td>Boul nezbucuimat</td>
<td>$d -8</td>
<td>29/01/2005</td>
<td><a href="http://www.cnn.com">CNN</a></td>
</tr>
</tbody>
</table>
</body>
</html>

Kor
01-05-2006, 12:41 PM
ok... try this (you may have either R$ or not in front of your currency values):


<!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:cornel@mc.ro
function sortIt(w){
var r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//collection of rows clones
var iRows = new Array()//indexes of cells
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);//clone the rows
iRows[i]=r[i].rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=1;i<iRows.length;i++){
var kid = r[i].cells[q].firstChild;
if(r[i].cells[q].firstChild.nodeType==1){
var v= kid.firstChild.nodeValue;
}
else{
var v = kid.nodeValue;
if(v.indexOf('/')!=-1){
v=v.split('/');
v = new Date(v[2],v[1],v[0])
}

else if(v.indexOf('R$')!=-1){
v = v.split(' ')[v.split(' ').length-1];
v = v.replace('.','').replace(',','.')
v=Number(v);
}
else if(Number(v)||parseInt(v)){
v = v.replace('.','').replace(',','.');
v=Number(v)
}
}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
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++){//re-write the rows
r[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START keeps zebra
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END keeps zebra
}
//switches the arrows
var s =['desc.gif','cres.gif','none.gif'];//relative url of the arrows
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++){//resets the other arrows
if(allS[i]!=sag){allS[i].setAttribute('src',s[2])}
}
}
</script>
</head>
<body>
<table width="800" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><strong>String</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Currency</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Date(dd/mm/yy)</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>URL</strong> <a href="#" onclick="sortIt(this);return false"><img src="none.gif" border="0"></a></td>
<td><strong>Currency</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>R$ 16,949<br></td>
<td>30/01/2005</td>
<td><a href="http://www.google.com">Google</a></td>
<td>164,1020<br></td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>R$ 164,1020</td>
<td>11/03/2006</td>
<td><a href="http://www.mc.ro">Media Concept</a></td>
<td> 16,949</td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>R$ 2,993<br></td>
<td>06/12/1999</td>
<td><a href="http://www.altavista.com">Altavista</a></td>
<td>2,993<br></td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>R$ 2.190,000<br></td>
<td>11/05/2000</td>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
<td>-8 </td>
</tr>
<tr class="tr1">
<td>Boul nezbucuimat</td>
<td>R$ -8</td>
<td>29/01/2005</td>
<td><a href="http://www.cnn.com">CNN</a></td>
<td>2.190,000</td>
</tr>
</tbody>
</table>
</body>
</html>

willjs
01-06-2006, 03:14 PM
Well, I'll need to try split my table, because I've lot of lines in my code.

You helped me so much because you solved my problem! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum