3

When the user selects a file to upload , i want to create a table dynamically showing some data related to file in the table created.Issue is my code works fine in Chrome and FF but not in IE. Please find the working sample(chrome and FF but not in IE) in "http://jsfiddle.net/v48mH/2/". Please suggest how to modify my code so that it will work in IE. Below is the code:

HTML code:

<input type="file" name="fileUpload" size="50" id="file1" multiple/> 

<table border="1" id="uploadTable" style="visibility:hidden">

           <tr> <th>SNo</th><th>FileName</th><th>Action</th> </tr>
 </table>

JavaScript code:

var rowN = 0;var count = 1;
 document.getElementById("file1").onchange = function() {
    document.getElementById("uploadTable").style.visibility="visible";
    var filename = "sample.txt";

    var table = document.getElementById("uploadTable");

     var row = '<tr><td><input type="text" name="sno" id="sno' + rowN + '" value="' + count + '"/></td><td><input type="text" name="fileName" id="fileName' + rowN + '" value="' + filename + '"/></td> <td width="100%">delete</td></tr>'; 
     //document.getElementById("uploadTable").value = file.size + " bytes";
     //document.getElementById("fileName").value = file.name;
      table.innerHTML = table.innerHTML + row;  
     rowN++;
     count++;
    };
user3692021
  • 53
  • 2
  • 7
  • IE has problems creating tables using `innerHTML`. Try using the defined methods for adding rows (`insertRow`) and cells (`insertCell`): https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow and https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement.insertCell - or just use `createElement` more generically – Ian Jun 02 '14 at 16:13
  • @lan - i tried that way, but could not able to build the table. Its showing innercell not recognized. – user3692021 Jun 02 '14 at 16:31
  • What is `innercell`? Show your attempt at using `insertRow` and `insertCell` – Ian Jun 02 '14 at 16:31
  • @lan - thanks lan, got it. i messed up with the "ID" attribute value so it was throwing me the error. – user3692021 Jun 02 '14 at 16:57
  • @Ian "IE has problems creating tables using innerHTML..." what kind of problems? I never had problems with this. – Vitor Canova Jun 02 '14 at 18:02
  • 1
    @Vitor Canova , yes it has problems creating dynamic table using innerHTML, u can use my jsfiddle to track the issue, jsfiddle works in chrome but not in IE. – user3692021 Jun 02 '14 at 18:11
  • Wow. now I see. Take a look at this example: http://jsfiddle.net/ErEgG/2/ I think you just need to get the `tbody` of your table instead. – Vitor Canova Jun 02 '14 at 18:19
  • 1
    @VitorCanova - Fiddle you shared is not working in IE8, pls try the same in IE8 . – user3692021 Jun 02 '14 at 18:38
  • Didn't realized you need support IE8. I'm trying in IE11. – Vitor Canova Jun 02 '14 at 18:42
  • OK.From IE10 many of the features working, i want to make it work in IE8. – user3692021 Jun 02 '14 at 18:44
  • Well, it will work if you write the entirely table, not only its rows. For example, adding it (all its markup) to a div. Don't know how to find `tbody` in IE8 without JQuery. – Vitor Canova Jun 02 '14 at 20:44

0 Answers0