Javascript 将数据从firestore显示到HTML表中

我需要将练习集合的数据显示到HTML表中。 我曾想过使用getElementByID来完成它，但它只显示1行。这样做的正确方式是什么？多谢各位

请参阅以下代码：

HTML代码

<div class="container">
              <h2>Manage Exercises:</h2>
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Exercise Name</th>
                        <th>Body Part</th>
                        <th>Exercise Type</th>
                        <th>Sets + Reps/Duration</th>
                        <th>Image</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="tr">
                        <td id="ename"></td>
                        <td id="body_part"></td>
                        <td id="etype"></td>
                        <td id="esets"></td>
                        <td id="eimage"></td>
                       </tr>
                   </tbody>
                </table>

<h3>ACTIVE USER</h3>

        <table id="tbl_account_list" border="2" cellpadding="10" style="border-collapse:collapse;">
            <thead>
                <th>EMAIL</th>
                <th>FULL_NAME</th>
                <th>UNI_ID</th>
            </thead>

        </table>

firestore.collection('account').get().then((snapshot) => {
                snapshot.docs.forEach(doc => {
                    renderAccount(doc);
                })
            })

            const accountList = document.querySelector('#tbl_account_list') ;
            function renderAccount(doc){
                let tr = document.createElement('tr');
                let td_email = document.createElement('td');
                let td_full_name = document.createElement('td');
                let td_uni_id = document.createElement('td');

                tr.setAttribute('data-id', doc.id);
                td_email.textContent = doc.data().email;
                td_full_name.textContent = doc.data().full_name;
                td_uni_id.textContent = doc.data().uni_id;

                tr.appendChild(td_email);
                tr.appendChild(td_full_name);
                tr.appendChild(td_uni_id);

                accountList.appendChild(tr);

            }

更新：

console.log("Initialisation Successful!");
var db = firebase.firestore();

var exRef = db.collection('Exercises');
var allex = exRef
  .get()
  .then(snapshot => {
    snapshot.forEach(doc => {
        var EName = doc.data().Name;
        var Type = doc.data().Type;
        var BodyPart = doc.data(). BodyPart;
        var Sets = doc.data().Sets;
        const Image = doc.data().Image;

        document.getElementById("ename").value = EName;   
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });

替换：

document.getElementById（“ename”）.value=ename

作者：
document.getElementById（“ename”）.innerText=ename

它现在只显示一条记录，如何显示所有记录？
我想您应该使用元素上的属性尝试类似的操作：

document.getElementById("ename").innerText = EName;

我已经尝试过这些代码，它对我很有效。我没有根据您的案例编写代码，但您的案例与我的类似。我希望有帮助

HTML代码

<div class="container">
              <h2>Manage Exercises:</h2>
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Exercise Name</th>
                        <th>Body Part</th>
                        <th>Exercise Type</th>
                        <th>Sets + Reps/Duration</th>
                        <th>Image</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="tr">
                        <td id="ename"></td>
                        <td id="body_part"></td>
                        <td id="etype"></td>
                        <td id="esets"></td>
                        <td id="eimage"></td>
                       </tr>
                   </tbody>
                </table>

<h3>ACTIVE USER</h3>

        <table id="tbl_account_list" border="2" cellpadding="10" style="border-collapse:collapse;">
            <thead>
                <th>EMAIL</th>
                <th>FULL_NAME</th>
                <th>UNI_ID</th>
            </thead>

        </table>

firestore.collection('account').get().then((snapshot) => {
                snapshot.docs.forEach(doc => {
                    renderAccount(doc);
                })
            })

            const accountList = document.querySelector('#tbl_account_list') ;
            function renderAccount(doc){
                let tr = document.createElement('tr');
                let td_email = document.createElement('td');
                let td_full_name = document.createElement('td');
                let td_uni_id = document.createElement('td');

                tr.setAttribute('data-id', doc.id);
                td_email.textContent = doc.data().email;
                td_full_name.textContent = doc.data().full_name;
                td_uni_id.textContent = doc.data().uni_id;

                tr.appendChild(td_email);
                tr.appendChild(td_full_name);
                tr.appendChild(td_uni_id);

                accountList.appendChild(tr);

            }

您可以像这样在dom元素中追加文本：

document.getElementById("ename").value += EName

只有像
这样的表单控件才具有有帮助的
value
属性，但我使用了：document.getElementById（“ename”）.innerHTML=ename；从innerText属性链接。但它只显示一个数据。对于Rae数据，innerText优于innerHTML。您正在添加文本，而不是html。