Question

因此，我使用limitToLast函数成功显示了Firebase中的1个数据库。 Here is the webpage look like Kinda好奇如何使用javascript从Firebase控制台显示我的所有数据库（来自选定父级的所有子级）？

List of my database in firebase that I want to display 这是我的代码如下：

label {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  line-height: 1.4em;
  box-shadow: 0 0 0 1px #000;
  border-radius: 0.2em;
  cursor: pointer;
  margin: 0 0.2em;
}

/* styling the <label> adjacent to an <input>: */
input+label {
  color: #000;
  background-color: #fff;
}

/* styling the <label> adjacent to a checked <input>: */
input:checked+label {
  color: #fff;
  background-color: limegreen;
}

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}

<form>
  <fieldset>
    <legend>All the labels</legend>
    <fieldset>
      <legend>One</legend>
      <label for="a">a</label>
      <label for="b">b</label>
      <label for="c">c</label>
      <label for="d">d</label>
      <label for="e">e</label>
      <label for="f">f</label>
    </fieldset>
    <fieldset>
      <legend>Two</legend>
      <label for="g">g</label>
      <label for="h">h</label>
      <label for="i">i</label>
      <label for="j">j</label>
      <label for="k">k</label>
      <label for="l">l</label>
    </fieldset>
  </fieldset>
  <fieldset>
    <legend>Group 1</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a"><label for="a">a</label>
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"><label for="b">b</label>
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"><label for="c">c</label>
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"><label for="d">d</label>
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"><label for="e">e</label>
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"><label for="f">f</label>

    <div class="a"> Hello </div>
    <div class="b"> BYE </div>
  </fieldset>
  <fieldset>
    <legend>Group 2</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g"><label for="g">g</label>
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"><label for="h">h</label>
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"><label for="i">i</label>
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"><label for="j">j</label>
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"><label for="k">k</label>
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"><label for="l">l</label>

    <div class="a"> Hello </div>
    <div class="b"> BYE </div>
  </fieldset>
</form>

Answer 1

您将需要为每个订单生成一个新的<tr>。一种非常简单的方法是在您的on('child_added'回调中生成DOM元素：

var table = document.querySelector("tbody");
order.on('child_added', function(childSnapshot) {
  order = childSnapshot.val();
  var tr = document.createElement('tr');
  tr.appendChild(createCell(order.orderId));
  tr.appendChild(createCell(order.shipping));
  tr.appendChild(createCell(order.subTotal));
  tr.appendChild(createCell(order.total));
  table.appendChild(tr);
});

如您所见，此代码为每个子订单/订单创建一个新的<tr>，并使用简单的DOM methods进行填充。然后，它将新的<tr>添加到表中。

此代码使用一个简单的辅助函数来处理<td>元素（其中包含文本节点）的重复创建：

function createCell(text) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(text));
    return td;
}

显示Firebase数据库（Web）中的所有子项

1 个答案: