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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dropdown box to add or remove table rows

    Hi

    Wondering if someone can help. Below is the code that I have so far. What I’m after doing is when a number is selected on the dropdown box that the number of rows with the text boxes in the table below.

    In other words, if the number three is selected from the drop down, there would be three rows in the table with text boxes in. if 5 is selected then 5 rows etc.

    Hope that this makes sense and hope that someone can help me with this.

    Thanks



    <html>
    <head>
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="/itmedia/Style/style.css">
    </head>

    <body>
    <table width="278" border="0">
    <tr>
    <td width="220"><h3>New Equipment</h3></td>
    <td width="48"><select name="select2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    </select></td>
    </tr>
    </table>
    <table width="59%" id="table1">
    <tr>
    <td width="70">&nbsp;</td>
    <td width="151">
    <p align="center">PC Number</td>
    <td width="150">
    <p align="center">MO Number</td>
    <td width="150">
    <p align="center">PR Number</td>
    <td width="151">
    <p align="center">AX Number</td>
    </tr>
    <tr>
    <td>Asset Tag</td>
    <td width="151">
    <p>
    <input type="text" name="PCNumberNew1" size="21">
    </p></td>
    <td width="150">
    <p>
    <input type="text" name="MONumberNew1" size="21">
    </p></td>
    <td width="150">
    <p>
    <input type="text" name="PRNumberNew1" size="21">
    </p></td>
    <td width="151">
    <p>
    <input type="text" name="AXNumberNew1" size="21">
    </p></td>
    </tr>
    </table>

    </body>
    </html>



  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-


    Code:
    <html>
    <head>
    <script type = "text/javascript">
    
    var rowCount=1;
    
    function addRow() {
    rowCount++;
    
    var content1='<input type="text" name="text'+rowCount+'A">';
    var content2='<input type="text" name="text'+rowCount+'B">';
    var content3='<input type="text" name="text'+rowCount+'C">';
    var content4='<input type="text" name="text'+rowCount+'D">';
    
    tabBody=document.getElementsByTagName("TBODY").item(0);
    row=document.createElement("TR");
    cell1 = document.createElement("TD");
    cell2 = document.createElement("TD");
    cell3 = document.createElement("TD");
    cell4 = document.createElement("TD");
    cell1.innerHTML=content1;
    cell2.innerHTML=content2;
    cell3.innerHTML=content3;
    cell4.innerHTML=content4;
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    tabBody.appendChild(row);
    }
    
    function getRows() {
    var x = document.myform.addNewRow.value;
    document.myform.addNewRow.value = 0;
    for (var i = 1; i <=x; i++) {
    addRow('mytable');
    }
    }
    
    </script>
    
    </head>
    <body>
    
    <form name = "myform">
    <select name = "addNewRow" id = "addNewRow" onchange = "getRows()">
    <option value="0">Select Number Of Rows To Add</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>
    </select>
    
    <br><br>
    <table id='mytable'>
    <tbody>
    <TR>
    
    <TD><input name="text1A"></TD>
    <TD><input name="text1B"></TD>
    <TD><input name="text1C"></TD>
    <TD><input name="text1D"></TD>
    
    </TR>
    
    </tbody>
    </table>
    </form>
    </body>
    </html>
    The whole aim of practical politics is to keep the populace alarmed (and hence clamorous to be led to safety) by menacing it with an endless series of hobgoblins, all of them imaginary.
    H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist
    Last edited by Philip M; 05-12-2009 at 06:05 PM. Reason: Improved

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    thats great, just editing it now for my own form.

    out of interest, where it creates a textnode saying row number etc, is there a way to change that to a text box?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Didn't you want a select that would allow the user to choose the exact number of rows?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by TonyCable View Post
    Hi

    thats great, just editing it now for my own form.

    out of interest, where it creates a textnode saying row number etc, is there a way to change that to a text box?
    Yes, I revised the code to cover that. You may be working with the first version.

    Not sure exactly what adios means - obviously you can add as many rows to the select options as you wish. But if the user can only make the choice once (and not add any more rows) then it is not hard to disable attempts to add further rows.
    Last edited by Philip M; 05-12-2009 at 06:27 PM.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, but i also want to prepopulate them with text boxes if i can.

    i know this code doesn't do exactly what i was after, but its a start.

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great thank you very much, i'll edit this and get this working before moving on to the next bots that i want.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by TonyCable View Post
    yeah, but i also want to prepopulate them with text boxes if i can.

    i know this code doesn't do exactly what i was after, but its a start.
    Is this what you mean?

    var content1='<input type="text" name="text'+rowCount+'A" value = "ABC">';
    var content2='<input type="text" name="text'+rowCount+'B" value = "DEF">';
    var content3='<input type="text" name="text'+rowCount+'C" value = "GHJ">';
    var content4='<input type="text" name="text'+rowCount+'D" value = "KLM">';

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no the code that you gave me looks like it is doing pretty much the job that i want it to do, execpt i can't get it to add to the bottom of my table that i have called table1. it seems to be adding it to the top table that i have got called table2, but its prob something i've done

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You did not mention that you had two tables. Try:

    tabBody=document.getElementsByTagName("TBODY").item(1);


  •  

    Posting Permissions

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