Firebase数据渲染重复，添加间隔行引发问题求助

渲染Firebase中的数据时出现重复显示的问题，推测是因为尝试插入带space类的间隔行导致的，但不知道如何在不重复数据的前提下实现行间隔效果。

现有代码 #

JavaScript代码（Firebase数据渲染）

function renderTable() {
db.collection('xxx').get().then((snapshot) => {
  snapshot.forEach((doc) => {
    // Adds one row to the table for each document
    var row = document.getElementById('tabla-datos').insertRow(-1);
    
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
    cell1.innerHTML = doc.data().a;
    cell2.innerHTML = doc.data().b;
    cell3.innerHTML = doc.data().c;
    cell4.innerHTML = doc.data().d;
    cell5.innerHTML = doc.data().e;
    cell6.innerHTML = doc.data().fr;
    cell7.innerHTML = '<a href="#">Ver</a> | <a href="#">Edit</a> | <a href="#">Delet</a>';
     // Creates a new empty row at the end of the table
     let rows = document.getElementById('tabla-datos').insertRow(-1);

     // Assigns the class "space" to the row
     rows.classList.add("space");
    });
});

}

db.collection("Productos").onSnapshot(function() {
  renderTable();
});

CSS代码（间隔行样式）

tr.space{
    height:10px;
    border-bottom-width: 0px;
    background-color: #ffffff;
  }

1. 核心问题：未清空旧表格数据 #

onSnapshot会在数据变化时触发调用renderTable，但原代码没有清除之前渲染的行，导致每次都在旧数据后面追加新行，造成重复。所以第一步要在渲染新数据前清空表格（保留表头）。

2. 修改后的完整代码 #

function renderTable() {
  const tabla = document.getElementById('tabla-datos');
  // 清空表格中除表头外的所有行（假设表头是第一行）
  while (tabla.rows.length > 1) {
    tabla.deleteRow(-1);
  }

  db.collection('xxx').get().then((snapshot) => {
    // 遍历数据时记录索引，判断是否为最后一条
    snapshot.forEach((doc, index) => {
      // 创建数据行并填充内容
      var row = tabla.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      var cell7 = row.insertCell(6);
      
      cell1.innerHTML = doc.data().a;
      cell2.innerHTML = doc.data().b;
      cell3.innerHTML = doc.data().c;
      cell4.innerHTML = doc.data().d;
      cell5.innerHTML = doc.data().e;
      cell6.innerHTML = doc.data().fr;
      cell7.innerHTML = '<a href="#">Ver</a> | <a href="#">Edit</a> | <a href="#">Delet</a>';

      // 只在非最后一条数据后添加间隔行，避免末尾多出空行
      if (index !== snapshot.docs.length - 1) {
        let spaceRow = tabla.insertRow(-1);
        spaceRow.classList.add("space");
        // 添加与表格列数一致的空单元格，防止布局错乱
        for (let i = 0; i < 7; i++) {
          spaceRow.insertCell(0);
        }
      }
    });
  });
}

// 监听数据变化，触发渲染
db.collection("Productos").onSnapshot(() => {
  renderTable();
});

3. 关键优化点 #

• 清空旧行：通过while循环删除表格中除表头外的所有行，确保每次渲染都是全新的数据。
• 间隔行逻辑优化：只在每条数据（除最后一条）后添加间隔行，避免末尾出现多余空行；同时给间隔行添加对应数量的空单元格，保证表格布局对齐。
• CSS样式无需修改，保持原有tr.space的样式即可。

内容的提问来源于stack exchange，提问作者Sofia Blanco Sanchez