Javascript for 循环在第一次迭代后停止答案

【问题标题】：Javascript for loop stops after first iterationJavascript for 循环在第一次迭代后停止
【发布时间】：2016-12-21 18:04:43
【问题描述】：

基本上我要做的是遍历一个相当大的（> 2k 行）表，并使用 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 个区块信息）。

所以我真的不知道这里出了什么问题。如果另一双眼睛能看到我在这里做错了什么，我会很高兴。

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

这是因为document.write 清除了表，所以在下一次迭代中document.getElementsByTagName('tr') 什么都不返回。

您可以将其附加到 dom 元素中，而不是使用 document.write 写入文档。看看这个。

工作demo

【讨论】：

太棒了！这听起来也很合乎逻辑，根本不会朝那个方向搜索。谢谢，帮了大忙！

【解决方案2】：

您正在使用document.write，它将用您写出的内容替换当前文档。因此，当您进入循环中的第二次迭代时，该表不再存在。

【讨论】：

【解决方案3】：

试试这个：

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

....

【讨论】：

【解决方案4】：

稍作修改。它在小提琴中，在这里：http://jsfiddle.net/nwnSz/。这会将表分配给一个变量，因此 document.write 不会清除它。

【讨论】：

【解决方案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/

【讨论】：