Добавление значений Array в таблицу Bootstrap

Question

У меня есть массив name [10] и массив Score [10] внутри скрипта в html-файле, который использует 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

Вы можете добавить идентификатор в таблицу и использовать 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>