Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Moving dynamically created table rows up and down in an HTML table

Reply
Thread Tools

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

 
 
T.G.
Guest
Posts: n/a
 
      10-10-2008
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>



 
Reply With Quote
 
 
 
 
T.G.
Guest
Posts: n/a
 
      10-14-2008
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!


"Conrad Lender" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) m...
> On 2008-10-10 19:56, T.G. wrote:
>> 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!

>
> This doesn't work at all, at least not in Firefox. When any of the "up"
> or "down" links is clicked, the following error occurs:
>
> clickedRow.removeNode is not a function
>
> in line #34: clickedRow.removeNode(true);
> Did you mean "removeChild"?
>
>> I cannot figure out why. I wonder if one of you could point me in the
>> right direction,

>
> The very first thing you should do validate your HTML, and fix all of
> the errors:
>
> http://validator.w3.org/
>
> Then use a script debugging tool in whatever browser you're using. I
> suggest you use Firefox, and install the "Firebug" add-on. Fixing your
> script shouldn't be too hard then.
>
>
> - Conrad



 
Reply With Quote
 
 
 
 
T.G.
Guest
Posts: n/a
 
      10-14-2008
Here is the problem in better detail, it seems I'd best be looking for a
workaround:

http://javascript-today.blogspot.com...e-problem.html

Thanks anyway!
Tim

"T.G." <(E-Mail Removed)> wrote in message
news:gd21dk$r6k$(E-Mail Removed)...
> 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!
>
>
> "Conrad Lender" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) m...
>> On 2008-10-10 19:56, T.G. wrote:
>>> 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!

>>
>> This doesn't work at all, at least not in Firefox. When any of the "up"
>> or "down" links is clicked, the following error occurs:
>>
>> clickedRow.removeNode is not a function
>>
>> in line #34: clickedRow.removeNode(true);
>> Did you mean "removeChild"?
>>
>>> I cannot figure out why. I wonder if one of you could point me in the
>>> right direction,

>>
>> The very first thing you should do validate your HTML, and fix all of
>> the errors:
>>
>> http://validator.w3.org/
>>
>> Then use a script debugging tool in whatever browser you're using. I
>> suggest you use Firefox, and install the "Firebug" add-on. Fixing your
>> script shouldn't be too hard then.
>>
>>
>> - Conrad

>
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
Free Moving Estimate, Local Movers, Long Distance Moving, PackingSupplies, Storage Rental, Home Moving, Apartment Moving, Office Moving,Commercial Moving linkswanted ASP .Net 0 01-06-2008 04:45 AM
Managing ViewState of a dynamically created Custom Composite Server Control -(where the original is also dynamically created) dickster ASP .Net Building Controls 0 12-08-2005 09:32 AM
script for moving rows up and down and traverse thru rows of HTML table Subba Rao via DotNetMonster.com ASP .Net 0 03-19-2005 06:46 AM
Dynamically created rows in table are not following the StyleSheetrules Raghuram Banda Javascript 1 11-07-2003 07:39 PM



Advertisments