帶數組的 For 循環不適用於 innerHTML

Question

我有一個ID="ranking"的 div，我想在那里放一些 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>';

內部 HTML 變成

<table>..</table>
foobar

<tr>和<td>在表上下文之外無效，因此它們被刪除。

后

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

innerHTML 不會改變，因為</table>不做任何事情，沒有要關閉的表。