After loading the snippet in your browser, you will see a simple HTML table
with 2 hyperlinks per line that call js code to move the rows up and down.
There is a hyperlink at the bottom, 'ADD', that dynamically adds 3 rows to
the bottom of the table. These new rows also have Up and Down links that
move the rows up and down.
The problem: the links in the 5 static rows work perfectly. The links in the
new rows only work the first time they are clicked on, then cease to fire!
I cannot figure out why. I wonder if one of you could point me in the right
direction,
Thanks in advace,
Tim
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title></title>
<script type="text/javascript">
function moveRow(src,direction)
{
var tb = document.getElementById('container');
var tr = tb.getElementsByTagName('tr');
var clickedRow = src.parentNode;
var currentRow = null;
for( var i=0; i < tr.length; ++i )
{
currentRow = tr[i];
if( clickedRow === currentRow )
{
switch( direction.toLowerCase() )
{
case "up":
if( i > 0 )
{
var newNode = clickedRow.cloneNode(true);
tb.insertBefore(newNode,clickedRow.previousSibling );
clickedRow.removeNode(true);
}
break;
case "down":
if( i < (tr.length-1) )
{
var newNode = clickedRow.cloneNode(true);
tb.insertBefore(newNode,clickedRow.nextSibling.nex tSibling);
clickedRow.removeNode(true);
}
break;
}
break;
}
}
}
function showOrder() {
var tbl = document.getElementById('tblCells');
var lastRow = tbl.rows.length - 1;
var tb = document.getElementById('container');
var tr = tb.getElementsByTagName('tr');
for( var i=0; i < tr.length; ++i )
{
currentRow = tr[i];
alert(currentRow.firstChild.firstChild.nodeValue);
}
}
function addRowsToTable()
{
var tbl = document.getElementById('tblCells');
var lastRow = tbl.rows.length;
var cells = "XYZ";
for (i = 0; i < cells.length; i++)
{
var rowNum = lastRow+i;
var row = tbl.insertRow(lastRow+i);
// left cell
var cell = row.insertCell(0);
var textNode = document.createTextNode(i);
cell.appendChild(textNode);
var cell = row.insertCell(1);
var link = document.createElement('a');
var txt = document.createTextNode('Up');
link.appendChild(txt);
link.href = "#";
link.onclick =
function(){moveRow(this.parentNode,this.innerHTML) ;return false;};
cell.appendChild(link);
cell = row.insertCell(2);
var link = document.createElement('a');
var txt = document.createTextNode('Down');
link.appendChild(txt);
link.href = "#";
link.onclick =
function(){moveRow(this.parentNode,this.innerHTML) ;return false;};
cell.appendChild(link);
}
}
</script>
</HEAD>
<body>
<form name="Form1" method="post" action="WebForm4.aspx"
id="Form1">
<input type="hidden" name="__VIEWSTATE"
value="dDwtNjU0MzcyMTk1Ozs+ZDKjSvZzo831ZcJ++XFLgrU ewAE=" />
<div id="divReportCells" ms_positioning="FlowLayout"
style="WIDTH: 100px; POSITION: relative; HEIGHT: 100px">
<table id="tblCells" border="1">
<tbody id="container">
<tr>
<td id="txtRow1">a</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow2">b</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow3">c</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow4">d</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow5">e</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);r eturn
false;">Down</a></td>
</tr>
</tbody>
</table>
<a href=javascript
:showOrder();>Show Order</a><br><a
href=javascript
:addRowsToTable();>Add</a>
</div>
</form>
</body>
</HTML>
Similar Threads
