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

Discussion in 'Javascript' started by T.G., Oct 10, 2008.

  1. T.G.

    T.G. Guest

    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.G., Oct 10, 2008
    #1
    1. Advertising

  2. T.G.

    T.G. Guest

    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" <> wrote in message
    news:...
    > 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
     
    T.G., Oct 14, 2008
    #2
    1. Advertising

  3. T.G.

    T.G. Guest

    Here is the problem in better detail, it seems I'd best be looking for a
    workaround:

    http://javascript-today.blogspot.com/2008/07/clonenode-problem.html

    Thanks anyway!
    Tim

    "T.G." <> wrote in message
    news:gd21dk$r6k$...
    > 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" <> wrote in message
    > news:...
    >> 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

    >
    >
     
    T.G., Oct 14, 2008
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=

    RE: Moving/adding Rows To an ASP:Table control

    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=, May 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    429
    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=
    May 10, 2004
  2. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,278
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  3. Arjen Hoekstra
    Replies:
    0
    Views:
    575
    Arjen Hoekstra
    Aug 2, 2005
  4. msimmons
    Replies:
    0
    Views:
    514
    msimmons
    Jul 16, 2009
  5. Raghuram Banda
    Replies:
    1
    Views:
    169
    kaeli
    Nov 7, 2003
Loading...

Share This Page