Javascript-使用手柄创建表格

我有一个index.html，其中有一个表的div，我正在用javascript填充它：

<div class="table-responsive table-hover">
  <table class="table" id="table">
  </table>
</div>

但是，即使我在函数

createHtml

中从控制台中记录的数组中获取所有对象，但只创建了表的第一行，这是为什么？我如何修复它

更新

我尝试过类似的方法，但我发现表未定义：

var tableTemplate = require('../../templates/table.handlebars');

var createHtml = function(data) {
  console.log(data);

    table += tableTemplate({
         avatar_url:  data.owner.avatar_url,
         full_name: data.full_name,
         homepage: data.homepage,
     score: data.score
    });
}

export function createTable(repositories, page) {
  var itemsPerPage = 20,
      offset = page*20;

  table = document.querySelector('#table');
  table.innerHTML = '';

  repositories.slice(offset, offset+itemsPerPage).forEach(createHtml);
}

---

您正在为每个迭代使用innerHTML替换HTML，从而丢失上一次迭代中的HTML。在forEach外部连接所有字符串并设置innerHTML一次。更好的选择（仅使用局部变量）是使用和

---

您正在为每个迭代使用innerHTML替换HTML，从而丢失上一次迭代中的HTML。在forEach外部连接所有字符串并设置innerHTML一次。更好的选择（仅使用局部变量）是使用和

---

你能不能给我提供一个代码示例，不确定，如何做到这一点，我将不胜感激！谢谢我可以，如果你尝试一些东西，展示你所尝试的。基本上，您需要在createHtml外部定义一个字符串，并将其连接到createHtml内部，您需要使用连接在一起的字符串变量从createHtml外部设置innerHTML。我尝试了一些方法，我想知道这是否是您的意思。就是不能让它工作。我已经用我的尝试更新了我的问题。@Leff在您的尝试中，您应该将所有HTML字符串连接到一个

tableHTML

变量中，然后只有在forEach完成后，才设置

table.innerHTML=tableHTML

，我添加了一个更优雅的解决方案。你能给我提供一个代码示例吗？不确定，如何做到这一点，我将不胜感激！谢谢我可以，如果你尝试一些东西，展示你所尝试的。基本上，您需要在createHtml外部定义一个字符串，并将其连接到createHtml内部，您需要使用连接在一起的字符串变量从createHtml外部设置innerHTML。我尝试了一些方法，我想知道这是否是您的意思。就是不能让它工作。我已经用我的尝试更新了我的问题。@Leff在您的尝试中，您应该将所有HTML字符串连接到一个

tableHTML

变量中，然后只有在forEach完成后，您才能设置

table.innerHTML=tableHTML

，我添加了一个更优雅的解决方案。

var tableTemplate = require('../../templates/table.handlebars');

var createHtml = function(data) {
  console.log(data);
  var table = document.querySelector('#table');
    table.innerHTML = tableTemplate({
         avatar:  data.owner.avatar_url,
         name: data.full_name,
         homepage: data.homepage,
         score: data.score
    });
}

array.forEach(createHtml); 

var tableTemplate = require('../../templates/table.handlebars');

var createHtml = function(data) {
  console.log(data);

    table += tableTemplate({
         avatar_url:  data.owner.avatar_url,
         full_name: data.full_name,
         homepage: data.homepage,
     score: data.score
    });
}

export function createTable(repositories, page) {
  var itemsPerPage = 20,
      offset = page*20;

  table = document.querySelector('#table');
  table.innerHTML = '';

  repositories.slice(offset, offset+itemsPerPage).forEach(createHtml);
}

var tableTemplate = require('../../templates/table.handlebars');

document.querySelector('#table').innerHTML = array.map(function(data) {
    return tableTemplate({
         avatar:  data.owner.avatar_url,
         name: data.full_name,
         homepage: data.homepage,
         score: data.score
    });
}).join('');