如何將HTML對象數組作爲表格輸出？

-3

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[0]，然後data[2]。如何將HTML對象數組作爲表格輸出？

來源

2017-08-13 Andrew C

歡迎來到SO。請閱讀[我可以問哪些主題]（http://stackoverflow.com/help/on-topic）和[如何提出一個好問題]（http://stackoverflow.com/help/how-to-ask ）和[完美的問題]（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。 SO是**不是免費的編碼或教程服務**！你必須證明你已經爲解決你自己的問題付出了一些努力。 – icecub

首先，爲什麼按這個順序？其次，爲什麼你使用'new Array'，這對你的代碼來說不會是「健康的」？但是，我已經在下面發佈了一個答案。 –

三個簡單步驟：1-學習如何訪問陣列數據。 2-學習如何創建動態元素。 3-學習如何將這些/這些元素附加到某物上。把它們放在一起，你將得到陣列數據，創建一個新的表格或者構建一個現有的數據... – NewToJS

我們將從您的代碼開始。

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，您的數組排序in-place;在調用sort方法後，它將被永久排序（而不是返回數組的排序副本）。

現在我們只是創建表。而不是使用document.write()，您應該直接操作DOM（請參閱此問題：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);

瞧！該表出現。

來源

2017-09-03 13:55:46 mjk

如何將HTML對象數組作爲表格輸出？

回答

相關問題