Question

Goodday，

我被困在下面的十字路口。我有多个数组嵌套在一个主数组中：

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

现在我需要建立一个表格，并将'Phone'与'0612345678'和'Town'映射为'New York'。所以看起来应该是这样的：

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

使用$ .each，我似乎无法映射正确的对。如何从该masterArray对象构建一个带有jquery的表。

我希望有人可以帮我解决这个问题。

问候，

罗伯特

Answer 1

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>

Answer 2

请参阅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的索引反转。通过这种方式，我可以在masterArray内包含每个数组的第i个元素。

具有多个数组映射的JQuery数组

2 个答案: