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. Advertisements

  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!
     
    T.G., Oct 14, 2008
    #2
    1. Advertisements

  3. T.G.

    T.G. Guest

    T.G., Oct 14, 2008
    #3
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.