Создать HTML таблицу и заполнить из Javascript Поиск - PullRequest
Новая
       6

Создать HTML таблицу и заполнить из Javascript Поиск

1 голос
/ 03 февраля 2020

Мне бы хотелось, чтобы в одной функции одновременно выполнялся поиск по массиву объектов и создавалось правильное количество HTML строк для заполнения этими данными поиска.

В настоящее время у меня есть массив объектов: 

const coworkerDB = [
  {
    id: "id",
    firstName: "First Name",
    LastName: "Last Name",
    Role: "Role",
    Notes: "Notes"
  }...

, для которого я создаю HTML таблицу, когда DOM загружается с: 

(function tableMaker() {
  let table = document.getElementById("myTable");
  for (let i = 1; i < coworkerDB.length; i++) {
    //create new row
    let newRow = table.insertRow();
    let data = Object.values(coworkerDB[i]);
    for (let j = 0; j < data.length; j++) {
      //create new cell
      let cell = newRow.insertCell(j);

      //add value to cells
      cell.innerHTML = data[j];
    }
  }
})();

Тогда onkeyup, я фильтрую эти визуализированные данные с помощью: 

function searchFunction() {
  let input,filter,table,tr,firstName,lastName,
    firstNameValue,
    lastNameValue;

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (let i = 0; i < tr.length; i++) {
    firstName = tr[i].getElementsByTagName("td")[1]; 
    lastName = tr[i].getElementsByTagName("td")[2];
    if (firstName || lastName) {
      firstNameValue = firstName.textContent || firstName.innerText;
      lastNameValue = lastName.textContent || lastName.innerText;
      if (
        firstNameValue.toUpperCase().indexOf(filter) > -1 ||
        lastNameValue.toUpperCase().indexOf(filter) > -1
      ) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Ожидается, что эта таблица станет больше, и мне не нужно отображать все данные на странице, а затем фильтровать результаты. Я хотел бы иметь возможность искать данные непосредственно из массива, вставлять правильное количество строк и отображать результаты поиска в таблицу.

Это часть небольшого проекта стажировки, и именно так данные передаются. нет реляционной БД.

Вот таблица html на всякий случай, если она поможет: 

       <div class="table-data">
          <table id="myTable">
            <tr>
              <th>id</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Role</th>
              <th>Notes</th>
            </tr>
          </table>
        </div>

Я искал лучший способ go об этом и склоняюсь к методу карты это вариация комбинации обеих функций, которые у меня уже есть. Кто-нибудь знает лучший способ сделать это?

Спасибо!

...