具有多個陣列映射的JQuery數組

Question

Goodday，

我被困在下面的十字路口。我有一個套主陣列內的多個陣列的：

var masterArray = [['Phone','Town'],['0612345678','New York']]; 

現在我需要建立一個表和圖「電話」與「0612345678」和「城」與「紐約」。所以它應該看起來像這樣：

<table> 
<tr><td>Phone</td><td>0612345678</td></tr> 
<tr><td>Town</td><td>New York</td></tr> 
</table> 

With $ .each我似乎無法映射正確的對。 我該如何使用來自該masterArray對象的jquery構建表。

我希望有人能幫我解決這個問題。

問候，

羅伯特

Answer 1

見JSFiddle with the demo code。

給出下面的HTML：

<table id='table'></table> 

您可以用下面的代碼創建表：

var masterArray = [ 
    ['Phone', 'Town'], 
    ['0612345678', 'New York'] 
]; 

var $table = $('#table'), 
    $tr, $td; 

for (var i = 0; i < masterArray[0].length; i++) { 
    $tr = $('<tr>'); 
    for (var j = 0; j < masterArray.length; j++) { 
     $td = $('<td>').text(masterArray[j][i]); 
     $tr.append($td); 

    } 
    $table.append($tr); 
} 

讓我來解釋一下。

我想masterArray裏面的所有數組都有相同的長度，所以在外部循環中我創建了單行<tr>行。行的在等於內陣列的元件的數目的數目：

for (var i = 0; i < masterArray[0].length; i++) { 

在內部循環：

for (var j = 0; j < masterArray.length; j++) { 

創建對於給定的行的單個<td>。注意：

$td = $('<td>').text(masterArray[j][i]); 

要寫入內新建<td>內容我倒的masterArray指標。通過這種方式，我可以將每個數組的第i個元素包含在masterArray之內。

Answer 2

var masterArray = [['Phone','Town'],['0612345678','New York']]; 
 

 
function buildTable(data, selector) { 
 
    var $parent = $(document.body); 
 
    // If given a selector, append to that. 
 
    if (selector != null && $(selector).length > 0) { 
 
     $parent = $(selector); 
 
    } 
 

 
    // Create table. 
 
    var $table = $('<table>'); 
 
    
 
    // Treat items in masterArray as column 
 
    $.each(masterArray, function(column, subArray) { 
 

 
    // Treat items in subArray as row. 
 
    $.each(subArray, function(row, data) { 
 

 
     // Keep create row until the nth row can be found. 
 
     while ($table.find('tr').eq(row).length === 0) { 
 
     $table.append('<tr>'); 
 
     } 
 

 
     // Append td with data to target row. 
 
     $('<td>').text(data).appendTo($table.find('tr').eq(row)); 
 
    }); 
 
    }); 
 
    
 
    // Append to targetElement 
 
    $table.appendTo($parent); 
 
} 
 

 
buildTable(masterArray);

table, td { 
 
    border: solid black 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>