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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding rows to table

    well i tried to make this script so that it would add rows to my table, but have no luck, and not sure where i went wrong...

    <html>
    <head>
    <script type="text/javascript">
    function insRow()
    {
    var x=document.getElementById('myTable').insertRow(3)
    var w=x.insertCell(0)
    var y=x.insertCell(1)
    var z=x.insertCell(2)
    w.innerHTML="Last name:<br><input name="last1" type="text" id="last1">"
    y.innerHTML="First name:<br><input name="first1" type="text" id="first1">"
    z.innerHTML="Phone:<br><input name="phone1" type="text" id="phone1">"
    }
    </script>
    </head>

    <body>
    <form>
    <table border="0" cellpadding="5" id="myTable">
    <tr>
    <td>Last name:<br>
    <input name="last1" type="text" id="last1"></td>
    <td>First name:<br>
    <input name="first2" type="text" id="first2"></td>
    <td>Phone:<br>
    <input name="phone1" type="text" id="phone1"></td>
    </tr>
    </table>
    <a href="#" onClick="insRow()">Add row</a>
    </form>
    </body>

    </html>



    Also, I'm trying to set a for loop, so that there will be no more than 9 rows. Here's what I put together:

    for (i = 0; i <= 9; i++)

    Is this correct? Where should I put it in the script?


    Also, the IDs need to be dynamic based on the number of rows added (ie if you had 3 rows, then you should have lname1, lname2, and lname3, etc). Any thoughts here would be appreciated?


    thanks
    cj

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    it's call maximizing resources

    it's call maximizing resources...

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>51373</title>
    	</head>
    	<body>
    		<form>
    			<fieldset>
    				<label for="name0">Name</label>
    				<input id="name0" name="name[]" type="text" value="">
    
    				<label for="phone0">Phone</label>
    				<input id="phone0" name="phone[]" type="text" value="">
    			</fieldset>
    
    			<input id="add_button" type="button" onclick="addFields()" value="Add Fields">
    			<input type="submit">
    		</form>
    
    		<script type="text/javascript">
    			var rows = 1;
    			var form = document.getElementsByTagName("form")[0];
    
    			function addFields()
    			{
    				var fieldset = document.createElement("fieldset");
    
    				fieldset.appendChild( createElement("label","for","name" + rows,"textNode","Name") );
    				fieldset.appendChild( createElement("input","id","name" + rows,"name","name[]","type","text","value","") );
    
    				fieldset.appendChild( createElement("label","for","name" + rows,"textNode","Phone") );
    				fieldset.appendChild( createElement("input","id","phone" + rows,"name","phone[]","type","text","value","") );
    
    				form.insertBefore(fieldset, document.getElementById("add_button"));
    
    				rows++;
    			}
    
    			function createElement(nodeName)
    			{
    				var element = document.createElement(nodeName);
    
    				for(var i = 1, l = arguments.length; i < l; i += 2)
    				{
    					if(arguments[i] == "textNode")
    					{
    						element.appendChild( document.createTextNode(arguments[i + 1]) );
    					}
    					else
    					{
    						element.setAttribute(arguments[i], arguments[i + 1]);
    					}
    				}
    
    				return element;
    			}
    		</script>
    	</body>
    </html>


  •  

    Posting Permissions

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