Я так много слышу о заполнении стола. Когда я смотрю на Google, появляется целая вселенная о том, как это сделать. Но давайте поговорим о заполнении представления!
Да, вы слышали правильно! Я думаю, что это самый простой и нормальный способ, которым все будут заниматься в первый раз.
Я хочу создать список! В этом простом списке я хочу показать предложения. Что-то выглядит так: https://www.dropbox.com/s/swm1n9ezled0ppd/img.jpg?dl=0
И моя идея заключалась в том, чтобы использовать для каждого элемента div, с заголовком и так далее. Но как бы я заполнил этот div с помощью JavaScript? И самое главное, как установить заголовки div для другого значения?
Как это сделать с помощью JavaScript или есть другой, гораздо лучший способ, которого я не знал?
РЕДАКТИРОВАТЬ:
db.collection("classes").doc(data.readGrades).get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
const data = doc.data();
const members = data.members;
var permission_table = document.getElementById("noten_tabelle_permission");
var permission_table_container = document.getElementById("main_padding");
members.forEach(el => {
console.log(el)
table_number++;
clone = permission_table.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "layout_table" + table_number;
permission_table_container.appendChild(clone);
db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
const data = doc.data();
//addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
//window.alert("Table name: " + ["grade_table" + table_number])
//____________________________________________________________________________
const html = fillTemplate("grade_table" + table_number, "test", data.mdl, data.klu);
// Join the array of html and add it as the `innerHTML` of `main`
document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);
addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
});
});
})
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
вот ваша отредактированная функция writete:
function fillTemplate({ table_name, id, subject, mdl, klu }) {
return `
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name">${id}</h1>
<table id="${table_name}" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
`;
}
А вот и другая функция:
function addToTable(table_name, subject, mdl, klu) {
var subject_name = getSubjectByNumber(subject);
var short_subject = getSubjectShortByNumber(subject);
//Zeile erstellen
var y = document.createElement([short_subject]);
y.setAttribute("id", [short_subject]);
document.getElementById([table_name]).appendChild(y);
//Spalten in einer Zeile
var y = document.createElement("TR");
y.setAttribute("id", [short_subject]);
//Spalten in einer Zeile
var cE = document.createElement("TD");
var tE = document.createTextNode([subject_name]);
cE.appendChild(tE);
y.appendChild(cE);
var a = document.createElement("TD");
var b = document.createTextNode([mdl]);
a.appendChild(b);
y.appendChild(a);
var c = document.createElement("TD");
var d = document.createTextNode([klu]);
c.appendChild(d);
y.appendChild(c);
document.getElementById(table_name).appendChild(y);
}
А вот и HTML:
<div class='main_has_permission' id="main_has_permission" style="display: none;">
<div class='main_padding' id="main_padding">
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name"></h1>
<table id="grades_table" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
</div>
</div>
Заранее спасибо.
~ Деревенщина