如何循环数组以显示表格所有行的所有数据？答案

【问题标题】：How to cycling Arrays to display all the data of all the rows of a table?如何循环数组以显示表格所有行的所有数据？
【发布时间】：2019-05-27 11:38:56
【问题描述】：

我创建了一个 HTML 页面，要求用户填写搜索表单并单击“搜索”按钮以显示结果。

当点击“搜索”按钮时，如果表单域不为空，2秒后会显示一些数据（我使用了JavascriptsetTimeout()方法来实现）。

要显示的数据由多个姓名、姓氏和地址组成，它们确实对应于名为“姓名”、“姓氏”和“地址”的表的三个<tr> 中的三个<td>。

在 js 文件中，我创建了一个名为 myArray 的新变量：

var myArray = [
  //first row
    [
      ["Mary", "Otto", "1204 Stoney Ridge"],
      ["Paula", "Red", "445 Mount Eden Road"],
      ["Jack", "Twist", "21 Greens Road RD 2"]
    ],

  //second row
    [
      ["Oliver", "Howick", "32 Wilson Street"],
      ["Jean", "Bros", "address 5"],
      ["Antoine", "Lavoisier", "address 6"]
    ],
  //third row
    [
      ["Benny", "Fair", "address 7"],
      ["Corinne", "Robespierre", "address 8"],
      ["Michael", "Mury", "address 9"]
    ]
  ];

我想循环 myArray 以显示“name, surname, address”的所有系列，而无需输入商场。我正在尝试使用 Javascript for loop 方法来做到这一点：

    function validateNome(){
  console.log('function validateNome has been activated');
  if ($("#inlineFormInputNome").val()=="") {
      $("#errorLog").show();
  } else {      
    $("#errorLog").hide();   
    $("#cercaNome").prop("disabled", true);
    $("#tbody").empty();
    setTimeout(function (){
      //ID alert bootstrap      
      //$("#tbody").empty().append('<tr><th scope="row">1</th><td>Maria</td><td>Ottone</td><td>Viale della Resistenza 1, 53100 Siena (SI)</td></tr>');
      // aggiungi un'array e mostra i dati dell'array

      var myArray = [
      //first row
        [
          ["Mary", "Otto", "1204 Stoney Ridge"],
          ["Paula", "Red", "445 Mount Eden Road"],
          ["Jack", "Twist", "21 Greens Road RD 2"]
        ],

      //second row
        [
          ["Oliver", "Howick", "32 Wilson Street"],
          ["Jean", "Bros", "address 5"],
          ["Antoine", "Lavoisier", "Via Flogisto 1"]
        ],
      //third row
        [
          ["Benny", "Fair", "address 7"],
          ["Corinne", "Robespierre", "address 8"],
          ["Michael", "Mury", "address 9"]
        ]
      ];

        for(var i=0; i<myArray.length; i++) {
          $("#tbody").append  ('<tr><th scope="row"> </th><td> myArray [0][0][0]</td> <td>myArray [0][0][1]</td><td> myArray [0][0][2] </td></tr>');
      }
      $("#tabella").show();
      $("#cercaNome").prop("disabled", false);
    } , 2000);
  }
}

换句话说，我所做的是替换以下行：

$("#tbody").append('<tr><th scope="row">1</th><td>Mary</td><td>Otto</td><td>1204 Stoney Ridge</td></tr>');

使用下面的for loop 函数：

for(var i=0; i<myArray.length; i++) {

      $("#tbody").append  (

    '<tr><th scope="row"> </th><td> myArray [0][0][0]</td> <td>myArray [0][0][1]</td><td> myArray [0][0][2] </td></tr>') ;
  }

myArray[0][0][0] 对应 "Mary" ，myArray[0][0][1] 对应 "Otto" 和 myArray[0][0][2] 对应 "1204 Stoney岭”。

当单击按钮时，如何循环数组以显示表格的三个不同行<tr> 的所有27 个数据<td>？

【问题讨论】：

标签： javascript arrays for-loop foreach iteration

【解决方案1】：

此时您正在使用局部变量 i 对 myArray 进行迭代。您需要使用它来引用数组中的一行。

myArray[i][0]

每行包含三个额外的数组

myArray[i][0] myArray[i][1] myArray[i][2]

这些可以使用另一个嵌套的 for 循环来访问，例如

for (var i = 0; i < myArray.length; i++) {
  for (var j = 0; j < myArray[0][0].length; j++) {
    console.log(myArray[i][j]);
  }
}

要最终构造一个有效的 tr 元素，您需要访问 myArray 的元素。目前你把它作为字符串的一部分直接放在字符串里面。例如正确方法myString="the value "+myArray[0]+" the rest of my string"

for (var i = 0; i < myArray.length; i++) {
  for (var j = 0; j < myArray[0][0].length; j++) {
    $("#tbody").append("<tr><th scope='row'> </th><td>" + myArray[i][i][0] + "</td> <td>" + myArray[i][j][1] + "</td><td>" + myArray[i][i][2] + "</td></tr>");
  }
}

【讨论】：