Question

我正在尝试使用Underscore.js在表格中显示我的所有数据。

我在这里有一个div容器类：

<div id="container"></div>

现在在Windows上加载我添加了一个事件Listener：

window.addEventListener("load", function(event){
      let content = document.getElementById('container');
      _.each(students, function(elem, index, list){
        _.extend(elem, {overall_score : (elem.midterm_score + elem.final_score) / 2});
        let items = '<table border="1"><thead><tr><th>Last Name</th><th>First Name</th><th>School</th><th>Grade</th><th>Overall Score</th></tr></thead><tbody><tr class="studentRec"><td class="lastname">' + elem.lastname +
        '</td><td class="firstname">' + elem.firstname + '</td><td class="school">' + elem.school + '</td><td class="grade">' + elem.grade + '</td><td class="overall-score">' + elem.overall_score + '</td></tr></tbody>';
        content.innerHTML += items;
      });
    });

所以基本上我在items变量中添加了所有记录并将它们放在表格布局中。我还扩展了一个特定列w / c是总分。现在，我得到了这个，而不是普通的表：

正如您所看到的，每次都会重复表头。你觉得我在这里错过了什么来创造一个完美的桌子？

Answer 1

因为，你为每条记录输出了许多表......

试试这个：

window.addEventListener("load", function(event){
    let content = document.getElementById('container');
    let table = document.createElement('table');
    let thead = document.createElement('thead');
    let tbody = document.createElement('tbody');
    let tr;
    thead.innerHTML = '<tr><th>Last Name</th><th>First Name</th><th>School</th><th>Grade</th><th>Overall Score</th></tr>';

    _.each(students, function(elem, index, list){
        _.extend(elem, {overall_score : (elem.midterm_score + elem.final_score) / 2});
        tr = document.createElement('tr');
        tr.className = 'studentRec';
        tr.innerHTML = '<td class="lastname">' + elem.lastname +
        '</td><td class="firstname">' + elem.firstname + '</td><td class="school">' + elem.school + '</td><td class="grade">' + elem.grade + '</td><td class="overall-score">' + elem.overall_score + '</td>';
        tbody.appendChild(tr);
    });

    table.border = 1;
    table.appendChild(thead);
    table.appendChild(tbody);
    content.appendChild(table);
});

Answer 2

由于您已在<table><thead> ... </thead>下编写了_.each部分，因此数组中的每个元素都会创建一个 new 表。解决方案是从迭代中提取<table><thead> ... </thead>，然后会有一个表，每个元素对应一个数组。

window.addEventListener("load", function(event){
  let content = document.getElementById('container');
  var tableBody = "";
  tableBody += '<table border="1"><thead><tr><th>Last Name</th><th>First Name</th><th>School</th><th>Grade</th><th>Overall Score</th></tr></thead><tbody>';

  _.each(students, function(elem, index, list){
    _.extend(elem, {overall_score : (elem.midterm_score + elem.final_score) / 2});
    let items = '<tr class="studentRec"><td class="lastname">' + elem.lastname +
    '</td><td class="firstname">' + elem.firstname + '</td><td class="school">' + elem.school + '</td><td class="grade">' + elem.grade + '</td><td class="overall-score">' + elem.overall_score + '</td></tr>';
    tableBody += items;
  });

  tableBody += '</tbody></table>';
  content.innerHTML += tableBody;
});

Answer 3

您正在重复循环内的标题，尝试将行直接附加到您的表格中：

＆＃13;

var students = [{
  firstname: 'Harry',
  lastname: 'Potter',
  school: 'Poudlard',
  grade: '1st',
  midterm_score: 100,
  final_score: 100
}, {
  firstname: 'Harry',
  lastname: 'Potter',
  school: 'Poudlard',
  grade: '1st',
  midterm_score: 100,
  final_score: 100
}, {
  firstname: 'Harry',
  lastname: 'Potter',
  school: 'Poudlard',
  grade: '1st',
  midterm_score: 100,
  final_score: 100
}, {
  firstname: 'Harry',
  lastname: 'Potter',
  school: 'Poudlard',
  grade: '1st',
  midterm_score: 100,
  final_score: 100
}];

window.addEventListener("load", function(event) {
  let content = document.getElementById('list');
  _.each(students, function(elem, index, list) {
    _.extend(elem, {
      overall_score: (elem.midterm_score + elem.final_score) / 2
    });
    let items = '<tr class="studentRec"><td class="lastname">' + elem.lastname +
      '</td><td class="firstname">' + elem.firstname + '</td><td class="school">' + elem.school + '</td><td class="grade">' + elem.grade + '</td><td class="overall-score">' + elem.overall_score + '</td></tr>';
    content.innerHTML += items;
  });
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="container">
  <table border="1">
    <thead>
      <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>School</th>
        <th>Grade</th>
        <th>Overall Score</th>
      </tr>
    </thead>
    <tbody id="list">
    </tbody>
  </table>
</div>

＆＃13;

显示内容下划线js

3 个答案: