Question

Basically what I’m trying to do is traverse a pretty big (>2k lines) table, and get some information out of it with a javascript for loop.
The first iteration is doing exactly what I want, but that’s it. It doesn’t do anything else but return the first line and stops.

There is no error, and I’m at a loss after searching what could be the problem for several hours.

This is the script:

function start() {
    for (var i = 0; i < 100; i++){
        var tr = document.getElementsByTagName('tr')[i];

        var date = tr.getElementsByTagName('td')[1].innerHTML;
        var btime = tr.getElementsByTagName('td')[2].innerHTML;
        var etime = tr.getElementsByTagName('td')[3].innerHTML;
        var name = tr.getElementsByTagName('td')[5].innerHTML;
        var loc = tr.getElementsByTagName('td')[8].innerHTML;

        document.write(date + " " + name + " at " + loc + " from " + btime + " - " + etime);
    }
    document.write("End");
}

And what is returned is the following:

05-09-2011 Intro Module, Intro AI at AMC K01-222
from 10:00 - 12:00

And an example of the first table:

<table class="TableBody">
    <tr>
      <td class="dayCol">Ma</td>
      <td class="typeCol">05-09-2011</td>
      <td class="startCol">10:00</td>

      <td class="endCol">12:00</td>
      <td class="nameCol">3.1 Artificiële Intelligentie</td>
      <td class="nameCol">Intro Module, Intro AI</td>
      <td class="typeCol">H</td>
      <td class="staffCol">dr. D. Sent<br></td>
      <td class="roomCol"><a href="http://rooster.uva.nl/current_nl/showtimetable.aspx?type=reporturl&amp;idstring=830K01222">AMC K01-222</a><br></td>

      <td class="commentCol"> </td>
    </tr>
    <tr>
      <td class="dayCol">Ma</td>
      <td class="typeCol">05-09-2011</td>
      <td class="startCol">12:45</td>
      <td class="endCol">16:45</td>

      <td class="nameCol">3.1 Artificiële Intelligentie</td>
      <td class="nameCol">Zoeken</td>
      <td class="typeCol">H</td>
      <td class="staffCol">dr. N.B. Peek<br></td>
      <td class="roomCol"><a href="http://rooster.uva.nl/current_nl/showtimetable.aspx?type=reporturl&amp;idstring=830K01222">AMC K01-222</a><br></td>
      <td class="commentCol"> </td>

    </tr>
  </table>

So the first TR block is doing exactly as expected, but it isn’t going to the second block and further (using the i variable from the loop.

If I up the i variable in the third line manually, it does show the information of the TR block from put in number (e.g. if I change i to 15, it shows the 15th block info).

So I really don’t know what’s going wrong here. I would love if another pair of eyes could see what I am doing wrong here.

Answer 1

It is because of document.write which clears table so in the next iteration document.getElementsByTagName('tr') returns nothing.

Instead of writing to the document using document.write you can append it into a dom element. Take a look at this.

Working demo