Question

我使用Firebase存储用户信息，并且我希望使用每个用户信息填充div，以便可以接受或删除（但不会从Firebase中删除）。

所以我希望它的结构是这样的：

---------------------- 
Name 
Email 
Date
---------------------- 
Name 
Email 
Date
---------------------- 
and so on....

我目前得到的回报是这样的：

生成div的正确方法是什么，具体取决于Firebase中的数据量以及格式化内容的格式？

HTML：

<div>Some entry here
    <h4 id="name"></h4>
    <h4 id="date"></h4>
    <h6 id="email"></h6>
    <button id="0" class="remove">Remove</button>
  </div>
  <div>Another entry here
    <button id="1" class="remove">Remove</button>
  </div>

Javascript：

var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');
    $('#name').append(name);
    $('#email').append(email);
    $('#date').append(date);
  });
});

Answer 1

对于每个孩子，您将值附加到相同的HTML元素（即所有名称都附加到h4元素，ID为＃34; name＆＃34;，所有电子邮件都附加到id为＃34的人;电子邮件＆＃34;依此类推）。

所以通常它们显示在一行（一行）上。

您必须为每个子项（及其一组值）创建一个新的占位符。你可以用例如一张桌子，如：

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];


var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    // Insert a row in the table at the last row
    var newRow = tableRef.insertRow(tableRef.rows.length);
    // Insert a cell in the row at index 0
    var newCell = newRow.insertCell(0);
    // Append a text node to the cell with name value
    var newText = document.createTextNode(name);  // <-- name value from the child
    newCell.appendChild(newText);

    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(email);  // <-- email value from the child
    newCell.appendChild(newText);

    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(date);  // <-- date value from the child
    newCell.appendChild(newText);

  });
});

受How to insert row in HTML table body in Javascript?的启发。请参阅此SO帖子中的小提琴。

或者你可以用div来做，这里有一个可能的代码：。

<强> HTML

<div id="parentDiv"></div>

<强>的JavaScript

var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    element = document.createElement("div");
    element.appendChild(document.createTextNode(name));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(email));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(date));
    document.getElementById('parentDiv').appendChild(element);   
    //You could add a specific css class to this div to generate the bottom border   

  });
});

要完整，请注意您还可以使用一些MVVM javascript框架，如vue.js，knockout.js以及angular，react ......以便在HTML DOM中轻松反映查询结果到你的后端（反之亦然）。

使用每个Firebase条目一个条目填充容器

1 个答案: