javascript - Never talking about populate a normal view
问题描述
I am hearing so much about populating a table. When I look it up at google there is a whole universe of post how to do that. But let's talk about populating a view!
Yes, you heard right! I think it's such as the simplest and most normal way everybody would do the first time.
I want to create a list! In this simple list, I want to show sentences. Something looks like this: https://www.dropbox.com/s/swm1n9ezled0ppd/img.jpg?dl=0
And my idea was it to use for every single item a div, with a title in it and so on. But how would I populate that div with help of javascript? And the most important thing how to set the titles of the divs to a different value?
How to do that via JavaScript or is there another much better way i did not know?
EDIT:
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);
});
here is your writte function edited:
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>
`;
}
And here the other function:
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);
}
And here the 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>
Thanks in advance. ~carl
解决方案
好的,所以我有点无聊:)所以我编造了一个例子来帮助你。它包含:
1) 包含您的数据的对象数组。每个对象都有一个标题、一系列类型和年份。
2)它用于map
迭代数据数组并调用fillTemplate
每个对象。
3)使用每个数组对象的数据fillTemplate
返回一个完整的模板文字。注意:因为genre
是我们用来将数组join
元素连接到列表中的流派数组。
4) 它使用CSS flex 模型来设置 HTML 样式。
const data = [{ title: 'Mad Max: Fury Road', genre: ['Action & Adventure'], year: 2015 }, { title: 'Inside Out', genre: ['Animation', 'Kids & Family'], year: 2015 }, { title: 'Star Wars: Episode VII - The Force Awakens', genre: ['Action'], year: 2015 }];
function fillTemplate({ title, genre, year }) {
return `
<section class="panel">
<div class="left">
<div class="title">${title}</div>
<ul class="genres">
<li class="genre">${genre.join('</li><li class="genre">')}</li>
</ul>
</div>
<div class="year">${year}</div>
</section>
`;
}
// For each array object call `fillTemplate` which returns a new
// array element of HTML
const html = data.map(obj => fillTemplate(obj));
// Join the array of html and add it as the `innerHTML` of `main`
document.querySelector('main').innerHTML = html.join('');
main { display: flex; flex-direction: column; }
.panel { width: 60%; display: flex; padding: 0.5em; margin: 0.2em 0 0.2em 0; border: 1px solid #565656; background-color: #efefef; flex-direction: row; align-items: flex-start; }
.genres { margin: 0.3em 0 0 0; padding-left: 0; list-style-type: none; }
.panel div:first-child { width: 100%; }
.genre { display: inline-flex; margin-right: 0.4em; }
.title { font-weight: 600; font-size: 1.1em; }
.year { text-align: right; }
<main></main>
推荐阅读
- google-apps-script - 根据表单输入发送电子邮件
- javascript - 比较两个对象数组并获得差异
- flutter - 为什么我在使用 Flutter ChangeNotifierProvider 时出现内存问题?
- azure - 我的管道构建成功,但我需要在本地发生的 .xml 文件中发布结果,而不是在 DevOps 中
- python-3.x - 在 Twilio 中嵌套 if else
- python - 如何使用 plotly 绘制如下所示的图表?
- python - 如何在服务器中临时存储文件并从烧瓶 python 中的“下载按钮”检索回来
- reactjs - 使用 Ionic-Swipe 的 Ionic React 图像库
- jquery - 在 CKEditor 中禁用复制粘贴选项
- google-analytics - 将 Google Analytics 4 数据流式传输到 BigQuery 导致数据收集问题