使用Javascript + Jquery将数据从Firebase显示到刷新的html表中

时间:2019-01-23 15:40:20

标签: javascript html css firebase

这是我的第一个使用javascript和firebase的Dynamic项目,但我一直无法将数据显示到表中,我看过其他页面,但无法使用这些教程或从响应中学习。我想要的是在检测到新订单时显示并刷新数据。

我的代码在这里,数据库可应要求提供。预先谢谢你。

<body>
<script src="jquery-3.3.1.min.js"></script>




    <table id ="orders" style ="width:50%">
      <tr>
        <th>Order</th>
        <th>name</th>
        <th>order No.</th>
        <th>Items</th>
        <th>Price</th>
      </tr>

    </table>
  </body>
</html>
<style>
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#orders{
 border:2px solid black; 
}
th{
 border: 1px solid black;
  border-left:none;
  border-right:none;
}


</style>
<script>
var config = {
    apiKey: "*****",
    authDomain: "mycanteenapp-b0dfc.firebaseapp.com",
    databaseURL: "https://mycanteenapp-b0dfc.firebaseio.com",
    projectId: "mycanteenapp-b0dfc",
    storageBucket: "mycanteenapp-b0dfc.appspot.com",
    messagingSenderId: "18960278720"
  };
  firebase.initializeApp(config);

 var database = firebase.database(MyCanteen);
    database.ref(break).once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.Order + '</td>';
                content += '<td>' + val.name + '</td>';
                content += '<td>' + val.orderNo + '</td>';
                content += '<td>' + val.Items + '</td>';
                content += '<td>' + val.Price + '</td>';
                content += '</tr>';
            });
            $('#orders').append(content);
        }
    });  

0 个答案:

没有答案