# #javascript #html #firebase #firebase-realtime-database
Вопрос:
Я хочу, чтобы на одной странице отображалось несколько таблиц.
Я создаю две таблицы. Но данные 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 = 'lt;button type="button" class="btn btn-primary my-2" data-toggle="modal" data-target="#exampleModalCenter" onclick="FillTboxes(null)"gt;Add New Recordlt;/buttongt;' ControlDiv.innerHTML = 'lt;button type="button" class="btn btn-primary my-2 ml-2" data-toggle="modal" data-target="#exampleModalCenter" onclick="FillTboxes(' Sno ')"gt;Edit Recordlt;/buttongt;' trow.appendChild(ControlDiv); tbody.appendChild(trow); } lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"gt; lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;titlegt;Basiclt;/titlegt; lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="workout.css" /gt; lt;/headgt; lt;bodygt; lt;div class="container mt-3"gt; lt;table class="table table-dark"gt; lt;div class="btnadd"gt; lt;H1gt;Day 1lt;/H1gt; lt;button onclick="window.location.href='/Workout/BasicSchedule.html'"gt;Add Workoutlt;/buttongt; lt;/divgt; lt;theadgt; lt;thgt;S_nolt;/thgt; lt;thgt;Workout Namelt;/thgt; lt;thgt;Descriptionlt;/thgt; lt;thgt;Photolt;/thgt; lt;thgt;Durationlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/theadgt; lt;tbody id="tbody1"gt;lt;/tbodygt; lt;/tablegt; lt;/divgt; lt;hrgt; lt;div class="container mt-2"gt; lt;table class="table table-dark"gt; lt;div class="btnadd"gt; lt;H1gt;Day 2lt;/H1gt; lt;button onclick="window.location.href='/Workout/AddDays/day2.html'"gt;Add Workoutlt;/buttongt; lt;/divgt; lt;theadgt; lt;thgt;S_nolt;/thgt; lt;thgt;Workout Namelt;/thgt; lt;thgt;Descriptionlt;/thgt; lt;thgt;Photolt;/thgt; lt;thgt;Durationlt;/thgt; lt;thgt;Actionlt;/thgt; lt;/theadgt; lt;tbody id="tbody2"gt;lt;/tbodygt; lt;/tablegt; lt;/divgt; lt;hrgt; lt;script src="/Workout/fireConfig.js"gt;lt;/scriptgt; lt;!-- day1 --gt; lt;script id="MainScript"gt; // -----------------------------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 =gt; { 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)=gt; { var schedule=[]; snapshot. forEach(childsnapshot=gt; { schedule.push(childsnapshot.val()); }); AddAllItemsToTable(schedule); }); } function GetAllDataRealtime(){ const dbRef = ref(db,"Picture"); onValue(dbRef,(snapshot)=gt;{ var schedule = []; snapshot.forEach(childsnapshot =gt;{ schedule.push(childsnapshot.val()); }); AddAllItemsToTable(schedule); }); } window.onload = GetAllDataOnce; lt;/scriptgt; lt;scriptgt; // -----------------------------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 =gt; { 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)=gt; { var schedule2=[]; snapshot. forEach(childsnapshot=gt; { schedule2.push(childsnapshot.val()); }); AddAllItemsToTable2(schedule2); }); } function GetAllDataRealtime2(){ const dbRef2 = ref(db2,"Day2"); onValue(dbRef2,(snapshot)=gt;{ var schedule2 = []; snapshot.forEach(childsnapshot =gt;{ schedule2.push(childsnapshot.val()); }); AddAllItemsToTable2(schedule2); }); } window.onload = GetAllDataOnce2; lt;/scriptgt; lt;/bodygt; lt;/htmlgt;