javascript - DRY - 创建表的循环

Question

我将数据存储在数组中，并从该数组中使用循环创建表。对于一个表，我需要两列，另外 30 列(取决于数组项)。这将有三列。

var prodej = [
  /*First column, second, third column*/
  ["Jack", 100, 101],
  ["Bkack", 100, 5],
  ["Duck", 100, 9],
];

这是我的循环

for ( var i = 0; prodej.length > i; i += 1) {
  var tr = '<tr>'
  var td1 = '<td>' + prodej[i][0]; + '</td>'
  var td2 = '<td>' + prodej[i][1]; + '</td>'
  var td3 = '<td>' + prodej[i][2]; + '</td>'
  tr += td1 + td2 + td3 + '</tr>'
  $("#firstTable").append(tr);
}

这是另一个数组和循环

var another = [

  ["Buick", 100],
  ["Ford", 100],
  ["Nissan", 100],
];

for ( var i = 0; another.length > i; i += 1) {
  var tr = '<tr>'
  var td1 = '<td>' + another[i][0]; + '</td>'
  var td2 = '<td>' + another[i][1]; + '</td>'
  tr += td1 + td2 +  '</tr>'
  $("#secondTable").append(tr);
}

我看到很多相同的代码，但我不知道如何才能只有一个循环。目标是

• 获取内部数组的长度，并基于该长度在 tr 中创建相同的数字 td
• 根据数组名称创建唯一 ID

Answer 1

您可以编写一个将数组和 id 作为参数的函数。使用嵌套循环来创建单元格。

function createTable(data, id) {
  for (var i = 0; data.length > i; i += 1) {
    var tr = '<tr>';
    for (var j = 0; data[i].length > j; j += 1) {
      tr += '<td>' + data[i][j]; + '</td>';
    }
    tr += '</tr>';
    $("#" + id).append(tr);
  }
}

然后当你想创建表时可以调用这个函数:

 createTable(prodej, 'firstTable');
 createTable(another, 'secondTable');