CODEWITHSUNDEEP
javascriptgoogle-chromeinternet-explorerfirefox
Jaron787
Jaron787

Reputation: 560

JavaScript Create Table not working in IE

Please look at the below example. I can't work out why it is working in FireFox & Chrome but not in IE 11

https://jsfiddle.net/4qr8Ln4e/

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    data = { d : {
        results: [
            { Title: 'Title1', Description: 'Description1', Status: 'Status1', Complete: 'Complete1' },
            { Title: 'Title2', Description: 'Description2', Status: 'Status2', Complete: 'Complete2' },
            { Title: 'Title3', Description: 'Description3', Status: 'Status3', Complete: 'Complete3' },
            { Title: 'Title4', Description: 'Description4', Status: 'Status4', Complete: 'Complete4' } ] } };

    data.d.results.push({Title: 'Title5', Description: 'Description5', Status: 'Status5', Complete: 'Complete5'});


    $(document).ready(function() {
        for (var i = 0; i < data.d.results.length; i++) {
            item = data.d.results[i]
            str  = '<tr><td>' + item.Title + '</td><td> ' + item.Description + '</td><td>' + item.Status + '</td><td>' + item.Complete + '</td></tr>';
            $('#mytab tr').last().after(str);
       }
    });

    </script>
  </head>
  <body>
  <table id="mytab">
    <tr>
      <td>Task Title</td> <td>Description</td> <td>Task Status</td> <td>% Complete</td>
    </tr>
  </table>
  </body>
</html>

Upvotes: 0

Views: 53

Answers (2)

M.Hatoum
M.Hatoum

Reputation: 69

Please add var before item:

var item = data.d.results[i];

Upvotes: 1

Arngue
Arngue

Reputation: 235

Simple answer you are declaring variables without var and it can works on Firefox and Chrome but not in IE, it's a bad practise not declare variables with var, to run your code you just only need to change for

   for (var i = 0; i < data.d.results.length; i++) {
       var item = data.d.results[i]
       var str  = '<tr><td>' + item.Title + '</td><td> ' + item.Description + '</td><td>' + item.Status + '</td><td>' + item.Complete + '</td></tr>';
        $('#mytab tr').last().after(str);
   }

Upvotes: 1

Related Questions