javascript - 将数组值添加到 Bootstrap 表

Question

我在使用 Bootstrap 4 和 Firebase 的 FireStore 的 html 文件中的脚本中有一个 name[10] 数组和一个 score[10] 数组。

有没有办法将数组变量传递到表中，因为目前表似乎只接受字符串值，而不是变量。

<script>
        var nameArray =  Array.from(querySnapshot.docs, x => x.data().name);

        var scoreArray =  Array.from(querySnapshot.docs, x => x.data().score);

//将值输出成

格式

document.getElementById("0").innerHTML = "Name "+ " | " + "Score";
document.getElementById("1").innerHTML = nameArray[0] + " | " + scoreArray[0];  
document.getElementById("2").innerHTML = nameArray[1] + " | " + scoreArray[1];
document.getElementById("3").innerHTML = nameArray[2] + " | " + scoreArray[2];  
document.getElementById("4").innerHTML = nameArray[3] + " | " + scoreArray[3];      
document.getElementById("5").innerHTML = nameArray[4] + " | " + scoreArray[4];  
document.getElementById("6").innerHTML = nameArray[5] + " | " + scoreArray[5];      
document.getElementById("7").innerHTML = nameArray[6] + " | " + scoreArray[6];  
document.getElementById("8").innerHTML = nameArray[7] + " | " + scoreArray[7];      
document.getElementById("9").innerHTML = nameArray[8] + " | " + scoreArray[8];
document.getElementById("10").innerHTML = nameArray[9] + " | " + scoreArray[9]; 



</script>

<div class="container-fluid">        
  <table class="table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Dave</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

<p id="0"></p>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<p id="4"></p>
<p id="5"></p>
<p id="6"></p>
<p id="7"></p>
<p id="8"></p>
<p id="9"></p>
<p id="10"></p>

Answer 1

你可以给表格添加一个id，然后使用getElementById()获取表格元素，然后在 <script> 中本身，您可以使用变量将值填充到 <td>variable</td> 中并使用 innerHtml 将此标签插入到元素中

    <script>
      var table = document.getElementById('tableContents');
      var tableContents = '<tr><td>'+nameArray[0]+'</td><td>'+scoreArray[0]+'</td></tr>';
      table.innerHTML = tableContents;
    </script>


  <div class="container-fluid">        
      <table class="table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Score</th>
          </tr>
        </thead>
        <tbody id='tableContents'>
        </tbody>
      </table>
    </div>