对于带数组的循环不起作用

Question

我有一个div,ID="ranking"我想把一些JavaScript数组的信息放在一个表格中,每一行都有两列:一个用于dados[i][25],另一个用于dados[i][26].

我的代码是这样的:

function dadosRanking(dados){
        document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'
        for(var i=1;i<6;i++)
        {
          document.getElementById("ranking").innerHTML += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>';
        }
        document.getElementById("ranking").innerHTML += '</table>';
}

我期望的代码是这样的:

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
  <tr>
    <td>
      100
    </td>
    <td>
      Username
    </td>
  </tr>
</table>

但是,HTML代码脚本编写如下:

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
</table>
"100Username"

Answer 1

每次更新innerHTML浏览器都会解析并呈现它,为此,它还会尝试"修复"您的HTML.这可能会产生意想不到的后果.而不是推送到innerHTML部分表定义,而是在单独的值中收集HTML并推送到innerHTML一次.

function dadosRanking(dados){
    var s = "";
    s += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'
    for(var i=1;i<6;i++) {
        s += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>';
    }
    s += '</table>';
    document.getElementById("ranking").innerHTML += s;
}

后

document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'

innerHTML变成:

<table class="table">
  <tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr>
  <tr><td>PONTOS</td><td>UTILIZADOR</td></tr>
</table>

请注意,该表已关闭!

后

document.getElementById("ranking").innerHTML += '<tr><td>foo</td><td>bar</td></tr>';

innerHTML成为

<table>..</table>
foobar

<tr>并且<td>在表格上下文之外无效,因此它们被删除.

后

document.getElementById("ranking").innerHTML += '</table>';

innerHTML不会改变,因为</table>没有做任何事情,没有要关闭的表.