javascript - 按每列搜索和显示表格元素

Question

我正在尝试在 vanilla JS 中创建搜索栏，它将按每一列搜索元素。

我遇到的问题是 let td = tr[i].getElementsByTagName("td")[0];我知道我只针对[0]第一个元素。如何定位 4 个<td>元素（没有最后一个）？

这是JS代码

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 代码：

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

标签： javascript

Answer 1

你只需要使用Chris G上面所说的另一个循环。这是一个例子

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

如果您想获取最后一个元素，请执行此操作tr[i].getElementsByTagName("td")[tr[i].length]