时间戳

首页 > 解决方案 > 如何使用 Firebase 数据在一个 html 页面中显示多个表格？

javascript - 如何使用 Firebase 数据在一个 html 页面中显示多个表格？

问题描述

我想在同一页面中显示多个表格。

我创建了两个表。但是firebase数据只到最后一个表，其他表是空的。如何解决这个问题？

var Sno;

// get all data

function SelectAllData(){
document.getElementById('tbody1').innerHTML="";
Sno=0;
firebase.database().ref('Picture').once('value',
function(AllRecords)
{
    AllRecords.forEach(
        function(CurrentRecord){
            var Sname = CurrentRecord.val().Name;
            var img = CurrentRecord.val().Link;
            var des = CurrentRecord.val().Desc;
            AddItemsToTable(Sname,img,des);
        } 

    );
}
);
}
window.onload = SelectAllData;


// filling the table



                

                var s_list =[];


                function AddItemsToTable(Sname,img,des){
                    var tbody = document.getElementById('tbody1');
                    var trow =document.createElement('tr');
                    var td1 =document.createElement('td');
                    var td2 =document.createElement('td');
                    var td3 =document.createElement('td');
                    var td4 =document.createElement('td');
                  s_list.push([Sname,img,des]);

                    td1.innerHTML=++Sno;
                    td2.innerHTML= Sname;
                    td3.innerHTML= img;
                    td4.innerHTML= des;


                    trow.appendChild(td1);
                    trow.appendChild(td2);
                    trow.appendChild(td3);
                    trow.appendChild(td4);

                    var ControlDiv = document.createElement("div");
                    ControlDiv.innerHTML = '<button type="button" class="btn btn-primary my-2" data-toggle="modal" data-target="#exampleModalCenter" onclick="FillTboxes(null)">Add New Record</button>'
                    ControlDiv.innerHTML += '<button type="button" class="btn btn-primary my-2 ml-2" data-toggle="modal" data-target="#exampleModalCenter" onclick="FillTboxes('+Sno+')">Edit Record</button>'

                    trow.appendChild(ControlDiv);

                    tbody.appendChild(trow);



                }
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Basic</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="workout.css" />
</head>
<body>
<div class="container mt-3"> 
    <table class="table table-dark">
        <div class="btnadd">
        <H1>Day 1</H1>
        <button onclick="window.location.href='/Workout/BasicSchedule.html'">Add Workout</button>
    </div>
        <thead>
            <th>S_no</th>
            <th>Workout Name</th>
            <th>Description</th>
            <th>Photo</th>
            
           
            <th>Duration</th>
            <th>Action</th>
        </thead>


<tbody id="tbody1"></tbody>
    </table>

</div>
<hr>





<div class="container mt-2">
<table class="table table-dark">
    <div class="btnadd">
    <H1>Day 2</H1>
    <button onclick="window.location.href='/Workout/AddDays/day2.html'">Add Workout</button>
</div>
    <thead>
        <th>S_no</th>
        <th>Workout Name</th>
        <th>Description</th>
        <th>Photo</th>
        
       
        <th>Duration</th>
        <th>Action</th>
    </thead>


<tbody id="tbody2"></tbody>
</table>

</div>
<hr>
<script src="/Workout/fireConfig.js"></script>








<!-- day1 -->


<script id="MainScript">






// -----------------------------Filling the table---------------------------------------------

var sNo =0;
var tbody = document.getElementById('tbody1');


function AddItemsToTable(Photo,Name,Desc,Duration){

var trow =document.createElement('tr');
var td0 =document.createElement('td');
var td1 =document.createElement('td');
var td2 =document.createElement('td');
var td3 =document.createElement('td');
var td4 =document.createElement('td');
// planList.push([days,breakfast,lunch,dinner]);


        td0.innerHTML=++sNo;
        td1.innerHTML= Photo;
        td2.innerHTML= Name;
        td3.innerHTML= Desc;
        td4.innerHTML= Duration;

        trow.appendChild(td0);
        trow.appendChild(td1);
        trow.appendChild(td2);
        trow.appendChild(td3);
        trow.appendChild(td4);

        tbody.appendChild(trow);

}


function AddAllItemsToTable(Schedule)
{
    sNo = 0;
    tbody.innerHTML="";
    Schedule.forEach(element => {
       AddItemsToTable(element.Name,element.Desc,element.Link, element.Duration); 
    })
}


// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
      
    
      const firebaseConfig = {
        apiKey: "AIzaSyCutH42eSiILx1boEblkK9eH7vpD3AQKb8",
        authDomain: "theftinessgym.firebaseapp.com",
        databaseURL: "https://theftinessgym-default-rtdb.firebaseio.com",
        projectId: "theftinessgym",
        storageBucket: "theftinessgym.appspot.com",
        messagingSenderId: "484591601328",
        appId: "1:484591601328:web:4df3212fbee7ff3d53dd75",
        measurementId: "G-Z4QRKRJHKW"
      };
    
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
    
      import { getDatabase, ref, child, onValue,get } 
      from "https://www.gstatic.com/firebasejs/9.4.0/firebase-database.js";
    
    

    

const db = getDatabase();


// -----------------------------Getting all data---------------------------------------------

function GetAllDataOnce(){
    const dbRef = ref(db);

    get(child(dbRef,"Picture"))
    .then((snapshot)=> {
        var schedule=[];
        snapshot. forEach(childsnapshot=> {
            schedule.push(childsnapshot.val());
        });
        AddAllItemsToTable(schedule);
    });
}

    function GetAllDataRealtime(){
        const dbRef = ref(db,"Picture");
        onValue(dbRef,(snapshot)=>{
            var schedule = [];

            snapshot.forEach(childsnapshot =>{
                schedule.push(childsnapshot.val());
            });

            AddAllItemsToTable(schedule);
        });
    }







window.onload = GetAllDataOnce;

</script>  




<script>
    // -----------------------------Filling the table---------------------------------------------
    
    var sNo2 =0;
    var tbody2 = document.getElementById('tbody2');
    
    
    function AddItemsToTable2(Photo2,Name2,Desc2,Duration2){
    
    var trow =document.createElement('tr');
    var td0 =document.createElement('td');
    var td1 =document.createElement('td');
    var td2 =document.createElement('td');
    var td3 =document.createElement('td');
    var td4 =document.createElement('td');
    // planList.push([days,breakfast,lunch,dinner]);
    
    
            td0.innerHTML=++sNo2;
            td1.innerHTML= Photo2;
            td2.innerHTML= Name2;
            td3.innerHTML= Desc2;
            td4.innerHTML= Duration2;
    
            trow.appendChild(td0);
            trow.appendChild(td1);
            trow.appendChild(td2);
            trow.appendChild(td3);
            trow.appendChild(td4);
    
            tbody2.appendChild(trow);
    
    }
    
    
    function AddAllItemsToTable2(Schedule2)
    {
        sNo2 = 0;
        tbody2.innerHTML="";
        Schedule2.forEach(element => {
           AddItemsToTable2(element.Name,element.Desc,element.Link, element.Duration); 
        })
    }
    
        
     // Import the functions you need from the SDKs you need
     import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
      
    
      const firebaseConfig = {
        apiKey: "AIzaSyCutH42eSiILx1boEblkK9eH7vpD3AQKb8",
        authDomain: "theftinessgym.firebaseapp.com",
        databaseURL: "https://theftinessgym-default-rtdb.firebaseio.com",
        projectId: "theftinessgym",
        storageBucket: "theftinessgym.appspot.com",
        messagingSenderId: "484591601328",
        appId: "1:484591601328:web:4df3212fbee7ff3d53dd75",
        measurementId: "G-Z4QRKRJHKW"
      };
    
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
    
      import { getDatabase, ref, child, onValue,get } 
      from "https://www.gstatic.com/firebasejs/9.4.0/firebase-database.js";
    
    

    const db2 = getDatabase();
    
    
    // -----------------------------Getting all data---------------------------------------------
    
    function GetAllDataOnce2(){
        const dbRef2 = ref(db2);
    
        get(child(dbRef2,"Day2"))
        .then((snapshot)=> {
            var schedule2=[];
            snapshot. forEach(childsnapshot=> {
                schedule2.push(childsnapshot.val());
            });
            AddAllItemsToTable2(schedule2);
        });
    }
    
        function GetAllDataRealtime2(){
            const dbRef2 = ref(db2,"Day2");
            onValue(dbRef2,(snapshot)=>{
                var schedule2 = [];
    
                snapshot.forEach(childsnapshot =>{
                    schedule2.push(childsnapshot.val());
                });
    
                AddAllItemsToTable2(schedule2);
            });
        }
    
    
    
    
    
    
    
    window.onload = GetAllDataOnce2;
    
    </script>  
    

</body>
</html>

标签： javascripthtmlfirebasefirebase-realtime-database

解决方案

推荐阅读