CODEWITHSUNDEEP
javascripthtml
Rocks
Rocks

Reputation: 511

document.createElement not working on IE 8 and below

I have this for that lets users upload pictures. I wanted to limit the number of pictures to 4. At first it shows only one input field, then if a user wants to add more they can click on Button-Add-icon.png and another input field appears. When they reach four inputs and they decide to remove one they click on Button-Delete-icon.png.

This whole thing works fine on Firefox, Chrome, Seamonkey and IE9. But it doesn't work on IE8, IE7 and before. Could someone give a hint on how to get it fixed?

Thanks

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 
 /TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Document sans titre</title>

 <script type="text/javascript">
   var totalItems = 0;
   function addItems()
 {
   if(totalItems < 3) 
  {
  var table1 = document.getElementById('tab1');
  var newrow = document.createElement("tr");
  var newcol = document.createElement("td");
  var input = document.createElement("input");
  input.type="file";
  input.name="image[]";
  newcol.appendChild(input);
  newrow.appendChild(newcol);
  table1.appendChild(newrow);
  totalItems++;
  } else {
    //Display your message here.. 
         }
 }


  function remItems()
{
var table1 = document.getElementById('tab1');
var lastRow = table1.rows.length;
if(lastRow>=2) 
 {
 table1.deleteRow(lastRow-1);
 totalItems--; 
 }
}

 </script>
 </head>

 <body>

 <table align="center" border="0" id="tab1" >
  <tr>
   <td width="218" align="center"><input type="file" name="image[]" /></td>
      <td width="54" align="center"><img src="images/Button-Add-icon.png"  
      style="cursor:pointer" onclick="addItems()" />
      </td>
   <td><img src="images/Button-Delete-icon.png"  style="cursor:pointer" 
    onclick="remItems()" />
   </td>
  </tr>
 </table>

  <table align="center" border="0" id="tab2">
  </table>

 </body>
 </html>

Upvotes: 0

Views: 1021

Answers (1)

aaaaaaaaaaaa
aaaaaaaaaaaa

Reputation: 3700

You are adding the row as a child to the wrong element.

An HTML table always has a tbody element as a child element, all tr elements go inside this. If you write a piece of HTML including a table with no tbody element it will be created automatically, but when altering the table later on you have to take the tbody element into account.

An easy fix is to write the tbody element explicitly, give it an id, and insert new rows in the tbody element instead of in the table element.

<table>
    <tbody id="tb1">
        <tr><td></td></tr>
    </tbody>
</table>

Upvotes: 1

Related Questions