Как задействовать массивы для отображения всех данных всех строк таблицы? - PullRequest
Новая
       16

Как задействовать массивы для отображения всех данных всех строк таблицы?

0 голосов
/ 27 мая 2019

Я создал HTML-страницу, где пользователю предлагается заполнить форму поиска и нажать кнопку « Поиск », чтобы отобразить результаты.

При нажатии кнопки « Поиск », если поле формы не пустое, через 2 секунды будут отображаться некоторые данные (для этого я использовал метод Javascript setTimeout()).

Данные для отображения состоят из нескольких имен, фамилий и адресов, и они соответствуют трем <td> из трех <tr> таблицы с именами "Имя", "Фамилия" и "Адрес".

В файле 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, чтобы отобразить все серии " имя , фамилия , адрес " без необходимости вводить их все. Я пытаюсь использовать метод 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] соответствуют "Мэри" , myArray[0][0][1] соответствуют "Отто" и myArray[0][0][2] соответствуют "1204 Стони Ридж" .

Как задействовать массивы для отображения всех 27 данных <td> из трех разных строк <tr> таблицы при нажатии кнопки?

1 Ответ

1 голос
/ 27 мая 2019

В данный момент вы перебираете myArray, используя локальную переменную i . Вам нужно использовать его для ссылки на строку из вашего массива. 

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>");
  }
}
...