从不谈论填充普通视图

Question

我听到了很多关于填充表格的信息。当我在谷歌上查找它时，有一整个宇宙的帖子如何做到这一点。但是让我们谈谈填充视图！
是的，你没听错！我认为这是每个人第一次都会做的最简单和最正常的方式。

我想创建一个列表！在这个简单的列表中，我想显示句子。看起来像这样：https://www.dropbox.com/s/swm1n9ezled0ppd/img.jpg?dl=0
我的想法是为每个项目使用一个 div，其中包含一个标题等等。但是我将如何在 javascript 的帮助下填充该 div 呢？最重要的是如何将 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);
    });

这是您编辑的写函数：

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>

提前致谢。 ~卡尔

Answer 1

好的，所以我有点无聊:) 所以我做了一个例子来帮助你。它包含：

1) 包含您的数据的对象数组。每个对象都有一个标题、一个类型数组和一个年份。

2) 它使用map 遍历数据数组并为每个对象调用fillTemplate。

3) fillTemplate 使用每个数组对象的数据返回一个完整的template literal。注意：因为genre 是一个类型的数组，我们使用join 将数组元素连接到一个列表中。

4) 它使用CSS flex model 来设置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>

JSFiddle