I have a form (myForm) which has a 4row x 2 col table with a text box in each of the upper 6 cells and submit button and reset button in the lower right cell. I need to put a button in the lower left cell with an event that will duplicate the first 6 cells, text boxes too and add it to the existing table with the three buttons in the lower cells again: thus far I've spent a few hours on this with all sorts of strange results!! I now throw my hands in the air and hope that someone out there may provide a solution. thanks.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Form table requires an extention by clicking button 2
- Thread starter rosie3705
- Start date
-
1
- #2
trollacious
Programmer
One option would be to initially add the rows and cells and set the display to none, then when the button is click set the display to ''.
Another would be to put all the textboxes in 2 <td>s and add more textboxes to each cell using innerHTML.
Or do you need to add cells every time the button is clicked, meaning the possibility of multple additions?
Lee
Another would be to put all the textboxes in 2 <td>s and add more textboxes to each cell using innerHTML.
Or do you need to add cells every time the button is clicked, meaning the possibility of multple additions?
Lee
- Thread starter
- #3
-
1
- #4
Rosie, this is an extremely bare-bones example of lee's first suggestion:
SW!
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function toggleRows() {
var tblRows = document.getElementById("theTable").getElementsByTagName("tr");
for (i = 0; i < tblRows.length; i++) {
tblRows[i].className = (tblRows[i].className == "hide") ? "show" : (tblRows[i].className == "show") ? "hide" : "";
}
}
</script>
<style type="text/css">
table tr.hide {
display:none;
}
table tr.show {
/* ie and ff handle display of rows differently */
/* so you can just leave this blank */
}
</style>
</head>
<body>
<table id="theTable">
<tr>
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr class="hide">
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr class="hide">
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr class="hide">
<td>blah</td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="button" value="show/hide rows" onclick="toggleRows()" /></td>
<td><input type="submit" /><input type="reset" /></td>
</tr>
</table>
</body>
</html>-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]
- Status
Similar threads
