Javascript для цикла останавливается после первой итерации

Question

По сути, я пытаюсь перебрать довольно большую (> 2 тыс. Строк) таблицу и извлечь из нее некоторую информацию с помощью цикла javascript for. Первая итерация делает именно то, что я хочу, но это все. Он ничего не делает, только возвращает первую строку и останавливается.

Там нет ошибки, и я в растерянности после поиска, что может быть проблемой в течение нескольких часов.

Это скрипт:

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");
}

И возвращается следующее:

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

И пример первой таблицы:

<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>

Таким образом, первый блок TR работает точно так, как ожидалось, но он не идет ко второму блоку и далее (используя переменную i из цикла.

Если я поднял переменную i в третьей строке вручную, он показывает информацию о блоке TR с введенного числа (например, если я изменяю i на 15, он показывает информацию о 15-м блоке).

Так что я действительно не знаю, что здесь происходит. Я был бы рад, если бы другая пара глаз могла видеть, что я здесь делаю неправильно.

Answer 1

Это из-за document.write, который очищает таблицу, поэтому в следующей итерации document.getElementsByTagName('tr') ничего не возвращает.

Вместо записи в документ с помощью document.write вы можете добавить его в элемент dom.Взгляните на это.

Рабочая демо

Answer 2

Вы используете document.write, который заменит текущий документ тем, что вы выписываете.Итак, когда вы переходите ко второй итерации в цикле, таблица больше не существует.

Answer 3

Сделана небольшая модификация.Это в скрипте, здесь: http://jsfiddle.net/nwnSz/. Это назначает таблицу переменной, так что document.write не очистит ее.

Answer 4

Попробуйте с этим:

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

....

Answer 5

Вы должны поместить var tr = вне цикла, а также проблему с document.write, как указано другими.

function start() {
    var tr = document.getElementsByTagName('tr');
    for (var i = 0; i < tr.length; i++){
        var date = tr[i].getElementsByTagName('td')[1].innerHTML;
        var btime = tr[i].getElementsByTagName('td')[2].innerHTML;
        var etime = tr[i].getElementsByTagName('td')[3].innerHTML;
        var name = tr[i].getElementsByTagName('td')[5].innerHTML;
        var loc = tr[i].getElementsByTagName('td')[8].innerHTML;

        var div = document.createElement('div');
        div.innerHTML = date + " " + name + " at " + loc + " from " + btime + " - " + etime;
        document.body.appendChild(div);
    }
    var end = document.createElement('div');
    end.innerHTML = "END";
    document.body.appendChild(end);
}

http://jsfiddle.net/userdude/hxpZn/