sorting help

Hi All

I had an HTMLpage with a table consisting of 5 columns

the first two columns are images add and delete

on the page load i have only one row for the table

when i click the add button then a clone is created below it

not what i want is as soon as i add some rows and fill them with
numeric values

and click the ok button

the table should be sorted basing on the values of the third column

here the code

<html>
<head>
<title>Custom Deciling</title>
<script type="text/javascript">
function cloneRow(theCell)
{
if( document.createElement && document.childNodes )
{
var thisRow = theCell.parentNode;
var newElement = thisRow.cloneNode(true);
thisRow.parentNode.insertBefore(newElement,thisRow.nextSibling);
var nr = document.frmadd.textmin.length
cleanRow(newElement,nr);
}
}
function cleanRow(n,p)
{
if (n.id)
n.id = n.id.split('-')[0] + '-' + p;
if (n.name)
n.name = n.name.split('-')[0] + '-' + p;
if (n.value)
n.value = '';
for (var i=0; i<n.childNodes.length; i++) {
cleanRow(n.childNodesIdea,p);
}
}
function deleteRow(theCell)
{

var nr = document.frmadd.textmin.length
if (nr==undefined || nr==1)
{
alert("Operation Cannot be Performed");
return;
}
else
{
if( document.createElement && document.childNodes )
{
var thisRow = theCell.parentNode;
thisRow.parentNode.removeChild(thisRow);
}
}

}

</script>
</head>
<body bgcolor="#00265c" >
<form name="frmadd">
<table border="0" align=center>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align=center><Font face=verdana color=yellow
size=1>Min</font></td>
<td align=center><Font face=verdana color=yellow
size=1>Max</font></td>
<td align=center><Font face=verdana color=yellow
size=1>Decile</font></td>
</tr>
<tr>
<td onclick="cloneRow(this);"><img src="http://images/add.gif"
border="0" WIDTH="51" HEIGHT="23"></td>
<td onclick="deleteRow(this);"><img src="http://images/delete.gif"
border="0" WIDTH="51" HEIGHT="23"></td>
<td><input type=text name=textmin size=5 value=""></td>
<td><input type=text name=textmax size=5 value=""></td>
<td><input type=text name=textdecile size=5 value=""></td>
</tr>
</table>
<br>
<center><input type=button value=ok name=ok size=5
onclick=checkboxes()></center>
</form>
</body>
</html>

<script language=javascript>
function checkboxes()
{
///here the scripting should be done which sorts the table basing on
the values in 3rd column

}

</script>
[3428 byte] By [kalikoi] at [2008-3-6]
# 1

The following code assumes attribute id="myTable" has been added to the table. It removes the rows from the table and places them into an array, sorts them, and re-populates the table. It assumes the values are numbers. You can change the compareRows function as needed.

<script>
function checkboxes()
{
for (var i = 0; i < myTable.tBodies.length; i++) {
sortRows(myTable.tBodiesIdea);
}
}

function sortRows(tbody) {
var i, length = tbody.rows.length; rows = [];
for(i = 0; i < length; i++)
rowsIdea = tbody.rows[0].removeNode(true);
rows.sort(compareRows);
for (i = 0; i < rows.length; i++)
tbody.appendChild(rowsIdea);
}

function compareRows(a,b) {
function getKeyFromRow(row) {
var td = row.children[2];
return Number(td.children[0].value);
}
var aKey = getKeyFromRow(a), bKey = getKeyFromRow(b);
return aKey - bKey;
}
</script>

RokYu at 2007-10-7 > top of Msdn Tech,.NET Development,JScript for the .NET Framework...

.NET Development

Site Classified