K
kalikoi
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.childNodes,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> </td>
<td> </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="../../images/add.gif"
border="0" WIDTH="51" HEIGHT="23"></td>
<td onclick="deleteRow(this);"><img src="../../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>
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.childNodes,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> </td>
<td> </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="../../images/add.gif"
border="0" WIDTH="51" HEIGHT="23"></td>
<td onclick="deleteRow(this);"><img src="../../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>