Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    RDT
    RDT is offline
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Remove & appendChild

    I have some code that has a select list with values from 0-10 that when selected passes the selected value to a function that adds the correct # of rows to the table. The problem I'm having trouble with is replacing the existing table with the new table. Can anyone advise me the proper way to do this?


    /**********************************/
    Code below
    /**********************************/

    <html>
    <head>
    <script language="javascript">
    /*
    Trying to figure out how to remove previously added rows and

    replace with new value
    passed into function OR completely remove table if value is '0'.
    */
    function AddRow(noRows)
    {

    var vTrgTbl = window.document.getElementById('rowTable');
    var vSrcTbl = window.document.getElementById('Row1');
    var i;

    for (var i = 0; i < noRows; i++)
    {
    var vRow = vSrcTbl.lastChild.firstChild.cloneNode(true);
    vTrgTbl.lastChild.appendChild(vRow);
    }

    }
    </script>
    </head>
    <body>


    <form method="post" name="testForm">
    <table width="100%" border="0" cellspacing="0" cellpadding="2"

    class="content">

    <tr>
    <td width="32%">&nbsp;Total rows in table:</td>
    <td width="68%">
    <select name="rows" size="1"

    onChange="AddRow(this.selectedIndex)">
    <option value="0" selected>0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select></td>
    </tr>
    </table><table width="100%" border="0" cellspacing="0"

    cellpadding="2" class="content" id="rowTable">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </form>

    </body>
    </html>


    <div style="visibility:hidden">
    <table id="Row1">
    <tr>
    <td>Name:</td>
    <td><input type="text" name="name"></td>
    <td>Relationship:</td>
    <td><input type="text" name="relationship"></td>
    <td>Age:</td>
    <td><input type="text" name="age" size="3"></td>
    </tr>
    </table>
    </div>
    Last edited by RDT; 02-09-2003 at 05:38 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •