Как проверить элемент в таблице и сравнить значение с массивом

Что я хочу сделать: Функция, которую я хочу сделать, это сравнить и вставить данные в поле ввода, она должна проходить через столбец firstName в таблице и сравниваться с полем firstName в массиве, если какое-либо из них совпадает, тогда оно должно печатать значение в поле ввода.

Проблема: Я понятия не имею, как проверить каждую строку в столбце firstName в таблице и сравнить ее со значением firstName в массиве.

const student= ["Janet", "Weaver","Adam"];

let text = "";
student.forEach(myFunction);
student.forEach(element => console.info(element));
function myFunction(item) {
  text += item + "<br>"; 
}

//Check the firstName column in table
//if (td = student.firstName){
  //document.getElementById("janet").innerHTML = student.firstName;
//}

<!DOCTYPE html>
  <html>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>

  <body>

    <h2>User table</h2>
    <table style = "width:100%">
      <tr>
        <th>First name</th>
        <th>Age</th>
        <th>Caption</th>
      </tr>
      <tr>
        <td>Janet</td>
        <td>16</td>
        <td><input type = "text" id = "janet" placeholder = "Name"></input>*here should appear the name of Janet*
        </td>
        <tr>
          <td>John</td>
          <td>19</td>
          <td><input type = "text" placeholder = "Name"></input>
          </td>
        </tr>
    </table>

  </body>

  </html>

javascript

20.03.2022 21:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

РЕДАКТИРОВАТЬ : document.getElementsByTagName('tr') возвращает HTMLКоллекция, который необходимо преобразовать в Множество, чтобы вы могли использовать forEach

Array.from(document.getElementsByTagName('tr')).forEach(function(row) {

    let firstTD = row.getElementsByTagName('td').item(0);
    if (firstTD === null) { return; }
    let firstname = firstTD.innerHTML; 
    
    // does the array contain firstname?
    if (student.indexOf(firstname)>=0) {
        let input_col = row.getElementsByTagName('td').item(2);
        let input = input_col.getElementsByTagName('input').item(0);
       
        input.value = firstname;
    }

});

Обратите внимание, что, вероятно, было бы проще использовать идентификаторы или классы вместо подсчета тегов с помощью getElementsByTagName...

21.03.2022 12:05

Другие вопросы по теме

Discord strip_after_prefix не работает

Почему свойства в props.functionName нужно вызывать только иногда?

Динамически обновлять цену

Как получить массив из JavaScript в JavaController?

Как разбить числа в массиве на однозначные

DynamoDB ValidationException Предоставленный ключевой элемент не соответствует схеме

Как повторно включить Intellisense/предложения в VS Code (возможно, я случайно удалил путь программы для словаря

Как я могу упростить объекты в CSS или JS для определенных элементов?

Удалить атрибут в свойстве объекта внутри массива

Проблемы с выпадающим меню смены цвета

Как проверить элемент в таблице и сравнить значение с массивом

Ответы 1

Другие вопросы по теме

Похожие вопросы