CODEWITHSUNDEEP
javascriptinternet-explorer
user89021
user89021

Reputation: 15162

Why can't I dynamically add rows to a HTML table using JavaScript in Internet Explorer?

In Firefox it works, in my Internet Explorer 6 or 7 it doesn't:

<html>
<head>

    <script type="text/javascript">
      function newLine() {
        var tdmod = document.createElement('td');
        tdmod.appendChild(document.createTextNode("dynamic"));

        var tr = document.createElement('tr');
        tr.appendChild(tdmod);

        var tt  = document.getElementById("t1");
        tt.appendChild(tr);
      }     

    </script>
</head>
<body>

    <a href="#" onclick="newLine()">newLine</a>

      <table id="t1" border="1">
        <tr>
          <td>
          static
          </td>  
        </tr>
      </table>

</body>

The user clicks on the link "newLine" and new rows should be added to the table.

How to make this work also in IE?

Edit: Thanks to the accepted answer I changed it like this and now it works:

  <table border="1">
   <tbody id="t1">
    <tr>
      <td>
      static
      </td>  
    </tr>
   </tbody>
  </table>

Upvotes: 1

Views: 1090

Answers (2)

st78
st78

Reputation: 8316

Always put 

<tbody>

in table for IE

Upvotes: 4

cobbal
cobbal

Reputation: 70733

(untested) you might try appending the row to a tbody element, either the one that is usually created automatically or one you define yourself.

Upvotes: 7

Related Questions