Danamische AJAX-Tabelle

Basis-Tabelle

<div id="ScrollElement" onscroll="nextElements()"
  style="height: 100px; width: 300px; overflow: auto; border: solid 1px black;">
<table id="tableElement" >
    <thead>
        <tr>
            <th>Item Name</th>
        </tr>
    </thead>
    <tbody>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
       <tr><td>Item</td></tr>
    </tbody>
</table>
</div>
<span id='Debug'></span>

Javascriptcode

<script type="text/javascript">
var global_block = false;
    var global_counter = 0;

    function nextElements()
    {
     var element = document.getElementById('ScrollElement');
     var height = element.scrollHeight;
     var scroll = element.scrollTop;

     var diff = height - scroll;

     document.getElementById('Debug').innerHTML = diff;

     if(diff <= 200 && global_block == false)
     {
         global_block = true;
        appendNewElements();
     }
    }

    function appendNewElements()
    {
     for(var i=0; i<10; i++)
     {
      global_counter++;
      
      var newListElement = document.createElement('tr');

      var tdelement = document.createElement('td');

      var newtext=document.createTextNode('Martin' + global_counter);

      tdelement.appendChild(newtext);
      
      newListElement.appendChild(tdelement);
      
      //newListElement.innerHTML = 'AppendedItem: ' + global_counter;

      var parentElement = document.getElementById('tableElement').getElementsByTagName("TBODY")[0];
            
      parentElement.appendChild(newListElement);


      newListElement = null;
      tdelement = null;
      newtext = null;
      parentElement = null;
     }
     global_block = false;
    }
</script>

Anmerkung.

Dieses Basiskonstrukt läuft im sowohl im Internetexplorer (7) als auch im neuesten Chrome.