30
I am going to create the online form creation in html with javascript, i have a problem with the following code, i got this code from internet, the following script only works in IE but it doesn't work in other browser like (Firefox and Opera), i don't know what's the problem with code. If anybody know the solution let me know...
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <title>Adding and Removing Rows</title>
- <script language="javascript">
- //add a new row to the table
- function addRow()
- {
- //add a row to the rows collection and get a reference to the newly added row
- var newRow = document.all("tblGrid").insertRow();
- //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
- var oCell = newRow.insertCell();
- oCell.innerHTML = "<input type='text' name='t1'>";
- oCell = newRow.insertCell();
- oCell.innerHTML = "<input type='text' name='t2'>";
- oCell = newRow.insertCell();
- oCell.innerHTML = "<input type='text' name='t3'> <input type='button' value='Delete' onclick='removeRow(this);'/>";
- }
- //deletes the specified row from the table
- function removeRow(src)
- {
- /* src refers to the input button that was clicked.
- to get a reference to the containing <tr> element,
- get the parent of the parent (in this case case <tr>)
- */
- var oRow = src.parentElement.parentElement;
- //once the row reference is obtained, delete it passing in its rowIndex
- document.all("tblGrid").deleteRow(oRow.rowIndex);
- }
- </script>
- </head>
- <body>
- <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
- <table id="tblGrid" style="table-layout:fixed">
- <tr>
- <td width="150px">Field1</td>
- <td width="150px">Field2</td>
- <td width="250px">Field3</td>
- </tr>
- <tr>
- <td><input type="text" name="t1" /></td>
- <td><input type="text" name="t2" /></td>
- <td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
- </tr>
- <tr>
- <td><input type="text" name="t1" /></td>
- <td><input type="text" name="t2" /></td>
- <td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
- </tr>
- <tr>
- <td><input type="text" name="t1" /></td>
- <td><input type="text" name="t2" /></td>
- <td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
- </tr>
- <tr>
- <td><input type="text" name="t1" /></td>
- <td><input type="text" name="t2" /></td>
- <td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
- </tr>
- </table>
- <hr>
- <input type="button" value="Add Row" onclick="addRow();" />
- <hr>
- </body>
- </html>
Thanks in Advance,
V. Prasath
