Results 1 to 2 of 2

Thread: How do I input values and add rows passing values?

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Post How do I input values and add rows passing values?

    Hello,

    I need some help. I hope I can explain this clearly. I would like to write a script that will allow me to enter values in a text box (ex: type in John) and I click an add button to the right of the text box and then below, it adds a row with a default label (ex: ID Name:) in the 1st column and beside it in the 2nd column will be a readonly textbox with the value that was typed in the above text box (ex: John). Also, beside each added row will have a delete button for me to delete the row. I should be able to enter a value and add as many rows for the related value added as I need. Each new row should have a row counter as well. Any help will be greatly appreciated!

    I have added a shell of a sample below:

    Code:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <input name="" type="text"><input name="" type="button" value="Add">
    <h3>Dynamically Handeled Table</h3>
    <table width="450" border="1" cellspacing="0" cellpadding="0" id="mytable">
    <tr>
    <td>1</td>
    <td>ID Name:</td>
    <td><input name="" type="text" readonly="" value="Mary"></td>
    <td><input name="" type="button" value="Delete"></td>
    </tr>
    <tr>
    <td>2</td>
    <td>ID Name:</td>
    <td><input name="" type="text" readonly="" value="John"></td>
    <td><input name="" type="button" value="Delete"></td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by bigalo; 07-14-2008 at 08:21 PM.

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Why do you want the displayed value in a readonly text field - why not just put it in as ordinary text? Why display the label on every row? And finally, I think the number deserves its own label (i.e. ID) and the other can be shortened to "Name." So here's my proposed refinement of your example (with some handles for the JavaScript also added in and a few unnecessary attributes removed):
    Code:
    <html>
    	<head>
    		<title></title>
    		<script type="mod_table.js"></script>
    	</head>
    	<body>
    		<input name="name" id="name" type="text"><input type="button" value="Add" onclick="add(name.value);">
    		<h3>Dynamically Handeled Table</h3>
    		<table width="450" border="1" cellspacing="0" cellpadding="0" id="mytable">
    			<tr>
    				<th>ID</th>
    				<th>Name</th>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>Mary</td>
    				<td><input type="button" value="Delete" onclick="delete(this);"></td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>John</td>
    				<td><input type="button" value="Delete" onclick="delete(this);"></td>
    			</tr>
    		</table>
    	</body>
    </html>
    The JavaScript for this is relatively simple. I prefer to use the DOM table methods & collections (see these references) and an object-oriented approach. I'll let you take it from there - but remember to ask questions!

    EDIT: You might also style your table with CSS rather than attributes; this is neater and, in many ways, more flexible.
    Last edited by Jesdisciple; 07-15-2008 at 12:18 AM.

Bookmarks

Posting Permissions

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