CODEWITHSUNDEEP
javascript
bigBadWolf
bigBadWolf

Reputation: 100

Search and display table elements by every column

I am trying to create search bar in vanilla JS that will search elements by every column.

The problem I have is here let td = tr[i].getElementsByTagName("td")[0]; I know I am targeting only [0] first element. How to target 4 <td> elements (without last one)?

Here is JS code

const countriesContainer = document.querySelector("tbody");
const header = document.querySelector("thead");
const searchEl = document.getElementById("search");

let url = "https://restcountries.eu/rest/v2/all";

const ContentForHeader = {
  name: "Name",
  currency: "Currency",
  language: "Language",
  population: "Population",
  area: "Area",
  flag: "Flag",
};

const headerEl = document.createElement("tr");
headerEl.innerHTML = `
      <th>${ContentForHeader.name}</th>
      <th>${ContentForHeader.currency}</th>
      <th>${ContentForHeader.language}</th>
      <th>${ContentForHeader.population}</th>
      <th>${ContentForHeader.area}</th>
      <th>${ContentForHeader.flag}</th>
    `;
header.appendChild(headerEl);

getCountries();

async function getCountries() {
  const res = await fetch(url);
  const countries = await res.json();

  displayCountries(countries);
  console.log(countries);
}

function displayCountries(countries) {
  countries.forEach((country) => {
    const countryEl = document.createElement("tr");
    countryEl.classList.add("searching");
    countryEl.innerHTML = `
        <td>${country.name}</td>
        <td>${country.currencies[0].name}</td>
        <td>${country.languages[0].name}</td>
        <td>${country.population}</td>
        <td>${country.area}</td>
        <td><img src='${country.flag}'  width='100px'></img></td>
  `;
    countriesContainer.appendChild(countryEl);
  });
}

function searchCountries() {
  let search = document.getElementById("search").value.toUpperCase();
  let tableRecord = document.getElementById("tableRecord");

  console.log(search);
  let tr = tableRecord.getElementsByTagName("tr");

  for (let i = 0; i < tr.length; i++) {
    let td = tr[i].getElementsByTagName("td")[0];
    console.log(td);

    if (td) {
      let textvalue = td.textContent || td.innerText;
      if (textvalue.toUpperCase().indexOf(search) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

HTML code:

<main class="container">
      <input
        class="search"
        id="search"
        type="text"
        placeholder="Search..."
        onkeyup="searchCountries()"
      />
      <table id="tableRecord">
        <thead></thead>
        <tbody></tbody>
      </table>
    </main>

Upvotes: 0

Views: 352

Answers (1)

SaboSuke
SaboSuke

Reputation: 792

You just have to use another loop as Chris G said above. Here's an example

function searchCountries() {
  let search = document.getElementById("search").value.toUpperCase();
  let tableRecord = document.getElementById("tableRecord");

  console.log(search);    
  let tr = tableRecord.getElementsByTagName("tr");

  for (let i = 0; i < tr.length; i++) {
    let l = tr[i].length
    for (let j = 0; j < l; j++){
      let td = tr[i].getElementsByTagName("td")[j];
      console.log(td);

      if (td) {
        let textvalue = td.textContent || td.innerText;
        if (textvalue.toUpperCase().indexOf(search) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}

If you want to get the last element just do this tr[i].getElementsByTagName("td")[tr[i].length]

Upvotes: 1

Related Questions