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

Question

晚安，

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

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

现在我需要构建一个 table 并将 '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 构建一个 table。

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

你好，

罗伯特

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>

您可以使用以下代码构建 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 具有多个数组映射的数组

JQuery Array with multiple arrays mapping

javascript

arrays

mapping

jquery