Moving dynamically created table rows up and down in an HTML table

T

T.G.

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;
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.nextSibling);
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;
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++XFLgrUewAE=" />

<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);return false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow2">b</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow3">c</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow4">d</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return
false;">Down</a></td>
</tr>
<tr>
<td id="txtRow5">e</td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return false;">Up</a></td>
<td><a href="#"
onclick="moveRow(this.parentNode,this.innerHTML);return
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>
 
T

T.G.

Sorry, I neglected to inform the group that its and IE only app and this
does work in IE ... but I will have a boo at the link!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,829
Messages
2,569,737
Members
45,521
Latest member
maryb

Latest Threads

Top