Question

data[0]

我希望上面的代码作为HTML中的表输出，并根据数组中的第一列按降序排序。因此，data[2]应首先输出，然后输出<div class="container2"> <div id="myCarousel" class="carousel slide" data-ride="carousel" style="border:10px solid #f2f2f2;">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="http://res.cloudinary.com/t4bc0d3/image/upload/v1497010408/Images/Mom_Age_20.jpg" alt="Picture of a 20yr old Sandra Lee" class="photo d-block img-fluid"> <div class="carousel-caption cap1 d-none d-md-block"> <h5>Sassy!</h5> </div> </div> <div class="item"> <img src="http://res.cloudinary.com/t4bc0d3/image/upload/c_scale,h_1868/v1497010440/Images/Mom_1995.jpg" class="photo d-block img-fluid" alt="Picture of Sandra at 51"> <div class="carousel-caption cap2 d-none d-md-block"> <h5>Beautiful Bride</h5> </div> </div> <div class="item"> <img src="http://res.cloudinary.com/t4bc0d3/image/upload/v1497010463/Images/Mom_at_Cottage.jpg" class="photo d-block img-fluid" alt="Picture of Sandra at 68"> <div class="carousel-caption cap3 d-none d-md-block"> <h5>Creating...Something</h5> </div> </div> </div>  <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" href-target="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a> </div> </div>，然后输出#myCarousel { width: 35%; height: 35%; overflow: hidden; margin: 0 auto; }。

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);

瞧！表格出现了。

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

1 个答案: