PDA

View Full Version : How do I input values and add rows passing values?


bigalo
07-14-2008, 08:16 PM
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:



<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>
Jesdisciple
07-14-2008, 11:57 PM
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):
<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 (http://w3schools.com/htmldom/dom_obj_table.asp) these (http://w3schools.com/htmldom/dom_obj_tablerow.asp) references (http://w3schools.com/htmldom/dom_obj_tabledata.asp)) and an object-oriented (http://en.wikipedia.org/wiki/Object-oriented_programming) 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.