Question

我在html文件中的脚本中有一个名称[10]数组和一个得分[10]数组，该文件同时使用Bootstrap 4和Firebase的FireStore。

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

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

将Array值添加到Bootstrap表

1 个答案: