Form table requires an extention by clicking button 2

rosie3705 · Oct 23, 2007

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.

trollacious · Oct 23, 2007

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

rosie3705 · Oct 25, 2007

Thanks for that, I think I will opt for the first suggestion but how to write it??

kaht · Oct 25, 2007

Rosie, this is an extremely bare-bones example of lee's first suggestion:

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>

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] <. bites again.[/small]

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!

Form table requires an extention by clicking button 2

rosie3705

Technical User

trollacious

Programmer

rosie3705

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor