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

Question

再见，

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

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>

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

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

问候，

罗伯特

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>