By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,253 Members | 1,680 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,253 IT Pros & Developers. It's quick & easy.

Javascript Problem in Firefox

P: 30
Dear Members,

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
  1. <html>
  2.     <head>
  3.         <title>Adding and Removing Rows</title>
  4.         <script language="javascript">
  5.  
  6.             //add a new row to the table
  7.             function addRow()
  8.             {
  9.                 //add a row to the rows collection and get a reference to the newly added row
  10.                 var newRow = document.all("tblGrid").insertRow();
  11.  
  12.                 //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
  13.  
  14.                 var oCell = newRow.insertCell();
  15.                 oCell.innerHTML = "<input type='text' name='t1'>";
  16.  
  17.                 oCell = newRow.insertCell();
  18.                 oCell.innerHTML = "<input type='text' name='t2'>";
  19.  
  20.                 oCell = newRow.insertCell();
  21.                 oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";            
  22.             }
  23.  
  24.             //deletes the specified row from the table
  25.             function removeRow(src)
  26.             {
  27.                 /* src refers to the input button that was clicked.    
  28.                    to get a reference to the containing <tr> element,
  29.                    get the parent of the parent (in this case case <tr>)
  30.                 */            
  31.                 var oRow = src.parentElement.parentElement;        
  32.  
  33.                 //once the row reference is obtained, delete it passing in its rowIndex            
  34.                 document.all("tblGrid").deleteRow(oRow.rowIndex);        
  35.             }
  36.  
  37.         </script>
  38.     </head>
  39.     <body>
  40.  
  41.         <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
  42.         <table id="tblGrid" style="table-layout:fixed">
  43.             <tr>
  44.                 <td width="150px">Field1</td>
  45.                 <td width="150px">Field2</td>
  46.  
  47.                 <td width="250px">Field3</td>
  48.             </tr>
  49.             <tr>
  50.                 <td><input type="text" name="t1" /></td>
  51.                 <td><input type="text" name="t2" /></td>
  52.                 <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
  53.             </tr>
  54.             <tr>
  55.  
  56.                 <td><input type="text" name="t1" /></td>
  57.                 <td><input type="text" name="t2" /></td>
  58.                 <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
  59.             </tr>
  60.             <tr>
  61.                 <td><input type="text" name="t1" /></td>
  62.                 <td><input type="text" name="t2" /></td>
  63.                 <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
  64.  
  65.             </tr>
  66.             <tr>
  67.                 <td><input type="text" name="t1" /></td>
  68.                 <td><input type="text" name="t2" /></td>
  69.                 <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
  70.             </tr>
  71.         </table>
  72.         <hr>
  73.  
  74.         <input type="button" value="Add Row" onclick="addRow();" />
  75.         <hr>
  76.  
  77.     </body>
  78.  
  79.  
  80. </html>


Thanks in Advance,



V. Prasath
Apr 6 '09 #1
Share this Question
Share on Google+
2 Replies


dmjpro
100+
P: 2,476
"document.all" does not work in Mozilla.
Always try yo follow the W3C specification for JavaScript.
That would be working in all browsers ;)
Apr 6 '09 #2

acoder
Expert Mod 15k+
P: 16,027
In case you're wondering what the standard method is, it's document.getElementById() with a valid ID.
Apr 6 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.