如何在HTML中将JavaScript对象数组输出为表格？

Question

var data = new Array(3)
data[0] = [4, "New Orleans",24];
data[1] = [7, "Houston",89];
data[2] = [2, "Los Angeles",47];

document.write(data);

我希望上面的代码作为HTML中的表输出，基于数组中的第一列按降序排序。所以data[1]应首先输出，然后是data[0]，然后是data[2]。

Answer 1

我们将从您的代码开始。

var data = new Array(3)
data[0] = [4, "New Orleans",24];
data[1] = [7, "Houston",89];
data[2] = [2, "Los Angeles",47];

首先，我们需要对数组进行排序，以便按第一列的顺序进行打印。

我们可以通过调用array.sort(function(A, B) { /* comparator function */ })对数组进行排序。比较器是带有两个参数的任何函数，如果A小于B则返回-1，如果A大于B则返回1，如果A和B相等则返回0。您希望按第一列降序排序，因此它看起来像这样：

data.sort((a, b) => (a[0] > b[0] ? 1 : -1));

这是一个花哨的简写，说如果a的第一个元素大于b的第一个元素，则返回1（意味着a更大）;否则，返回-1。

使用array.sort，您的阵列就地排序;在调用sort方法之后，它被永久排序（而不是，例如，返回数组的排序副本）。

现在我们只创建表。您应该直接操作DOM（请参阅此问题：document.write()以供参考），而不是使用Dynamic creation of table with DOM。

以下内容不是最有效的方法，但对于初学者来说应该是最简单的方法：

var table = document.createElement('table');
for (var i = 0; i < data.length; i++) {
   var tr = document.createElement('tr');   
   var td1 = document.createElement('td');
   var td2 = document.createElement('td');
   var td3 = document.createElement('td');

   var text1 = document.createTextNode(data[i][0]);
   var text2 = document.createTextNode(data[i][1]);
   var text3 = document.createTextNode(data[i][2]);

   td1.appendChild(text1);
   td2.appendChild(text2);
   td3.appendChild(text3);

   tr.appendChild(td1);
   tr.appendChild(td2);
   tr.appendChild(td3);
   table.appendChild(tr);
}
// Adds the table to the page so you see it -- up until this moment, 
// we've just been preparing a table in memory.
document.body.appendChild(table);

瞧！表格出现了。