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
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Adding & Deleting Rows

    I have created a calculator for my site but I am having troubles figuring out a way to make the "add row" and "delete row" functionality work correctly. I would like the user to only see 1 row of information and then add/delete rows as needed. I currently only have 4 static rows. If anyone can help it would be greatly appreciated. Thanks

    The page is at
    https://learningportal.juniper.net/j...lator/Calc.htm

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    The easy way to do this is simply HIDE all but the first row. Then, when the user clicks on ADD ROW, you unhide the next row, etc. DELETE ROW is trickier: *WHICH* row does the user WANT to delete???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    First, validate your markup, here: http://validator.w3.org/
    You have more than 300 "warnings."

    Next, validate your CSS, here: http://jigsaw.w3.org/css-validator/

    Add / Remove Table Row:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function addRow(){
    		
    		var nForm = document.forms[0];
    		var nTableBody = nForm.getElementsByTagName('tbody')[0];
    		var nIndex = nForm.getElementsByTagName('tr');
    		var nClone = nIndex[0].cloneNode(true);	
    		var nFloor = nIndex[nIndex.length - 1];
    		nTableBody.insertBefore(nClone,nFloor);
    		nRows = nTableBody.getElementsByTagName('tr');		
    		nRows[nRows.length - 2].getElementsByTagName('td')[0].firstChild.data = nRows.length - 1;		
    		var nField = nRows[nRows.length - 2].getElementsByTagName('input');
    		for (i=0; i<nField.length; i++)
    			{
    			 nField[i].value = "";
    			}	
    	}
    
    	function removeRow(){
    
    		var nTableBody = document.forms[0].getElementsByTagName('tbody')[0];
    		var nIndex = nTableBody.getElementsByTagName('tr');
    		var lastRow = nIndex[nIndex.length - 2];
    		if (nIndex.length > 2)
    			{
    			 nTableBody.removeChild(lastRow);	
    			}				
    	}	
    	
    </script>
    <style type="text/css">
    
    	.floor {display: none;}
    
    </style>
    </head>
    	<body>
    		<form action="">	  
    			<table>	
    				<tbody>
    					<tr>
    						<td>1</td>
    						<td><input type="text" name="student[]" size="20" /></td>
    						<td><input type="text" name="address[]" size="20" /></td>
    						<td><input type="text" name="email[]" size="20" /></td>
    						<td><input type="text" name="complete[]" size="20" /></td>
    						<td><input type="text" name="remediation[]" size="20" /></td>
    					</tr>	
    
    					<tr class="floor"><td>empty</td></tr>
    						
    				</tbody>					
    			</table>
    			<input type="button" value="Add" onclick="addRow();" >
    			<input type="button" value="Remove" onclick="removeRow();">
    			<input type="submit" name="submit" value="Submit"> 			
    		</form>
    	</body>
    </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    While I completely agree with Sciliano's comments and the code is fine, I also think it's overkill. There's no reason to dynamically add and remove the rows when you can more easily show/hide existing rows.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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