开发者问题收集

使用 JavaScript 过滤 HTML 表格 - textContent 错误

2021-07-23
470
javascript php html

期望结果： 将 .csv 文件中的数据输入到 PHP 中。从 .csv 文件中获取数据并将其存储到数组中。使用 PHP 将数组存储到 HTML 表中。使用搜索引擎通过 JavaScript 筛选行。

我在 JavaScript 中收到以下错误： 未捕获的 TypeError：无法读取 null 的属性“textContent” 

<script>  
const searchInput = document.getElementById("search");
const rows = document.querySelectorAll("tbody tr");
//console.log(rows);

searchInput.addEventListener("keyup", function (event) { 
    //console.log(event);
    const q = event.target.value.toLowerCase();
       rows.forEach(row => {
          //console.log(row);
        row.querySelector("td").textContent.toLowerCase().startsWith(q); 
        ? (row.style.display = "table-row")
        : (row.style.display = "none");
    } );
});
 </script>

使用 console.log，我能够确定它正在正确读取和循环表中的每一行，但无法循环“td”以确定它是否与搜索引擎中的文本匹配。

如果该信息有用，则在显示行时数组是 NodeList。

如果需要，很乐意上传更多信息。提前感谢您的帮助！

编辑 添加最少的 HTML。该表包含 15 行，但出于此目的，仅添加几行。此表是使用 PHP 从数组创建的。

EDIT 2 标题已添加到标题中 

<html>
<head>  
</head> 
    <body>   
    <input type="text" name="search" id="search" placeholder="Search for services..">
    <table>
<thead>
    <tr>
    <th>Item #</th>
    <th>Name</th>
    <th>Type</th>
    <th>Make</th>
    <th>Model</th>
    <th>Brand</th>
    <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
    <td>1</td><td>Cut &amp; Blow Dry</td>
    <td>Service</td>
    <td></td>
    <td></td>
    <td>Hair by Cass</td>
    <td>Haircut and style after</td>
    </tr>
    </tbody>
</table>
    </body>
    </html>
2个回答
  • 您的 HTML 表格标记不正确。带有 <th> 的行应放在 <thead> 中，而不是 <tbody>
  • 您使用了无效的三元运算符语法 ; ? x : y 。
  • 使用 "input" 事件来处理鼠标复制/粘贴等操作。 
searchInput.addEventListener("input", function(evt) {
  const q = evt.currentTarget.value.toLowerCase();
  rows.forEach(row => {
    const matches = row.querySelector("td").textContent.toLowerCase().startsWith(q);
    row.style.display = matches ? "table-row" : "none";
  });
});

但请记住， row.querySelector("td") 只会获取一行中的第一个 TD（不是全部）：

使用 Array.prototype.some() 匹配多个单元格

这里有一个示例，它允许您搜索任何单元格，并使用 Element.classList.toggle() （以及 .includes() ，而不是 .startsWith() ） 

const EL_search = document.querySelector("#search");
const ELS_rows = document.querySelectorAll("tbody tr");

EL_search.addEventListener("input", function(evt) {
  const q = evt.currentTarget.value.toLowerCase();
  ELS_rows.forEach(TR => {
    const TDS = TR.querySelectorAll("td");
    const matches = [...TDS].some(TD =>TD.textContent.toLowerCase().includes(q));
    TR.classList.toggle("none", !matches);
  });
});

.none {
  display: none;
}

<input type="text" id="search" autocomplete="off">

<table>
  <thead>
    <tr><th>Name</th><th>Surname</th></tr>
  </thead>
  <tbody>
    <tr><td>Ann</td><td>Doe</td></tr>
    <tr><td>Jon</td><td>Doe</td></tr>
    <tr><td>Jonas</td><td>Foe</td></tr>
  </tbody>
</table>
Roko C. Buljan
2021-07-23

错误来自 row.querySelector("td") ，因为它试图在仅包含 th 子元素的标题 tr 元素中查找 td 。

修复很简单，在继续之前检查是否找到了 td ： 

const td = row.querySelector("td");
if (!td)
  return;

td.textContent.toLowerCase().startsWith(q) ?
  (row.style.display = "table-row") :
  (row.style.display = "none");

此外， querySelector 将仅返回找到的第一个元素，如果您需要查找所有元素，请使用 querySelectorAll ，它将返回元素列表，然后使用 for 循环处理列表中的所有元素。 

const tds = row.querySelectorAll("td");

for(let i = 0; i < tds.length; i++)
{
  tds[i].textContent.toLowerCase().startsWith(q) ?
    (row.style.display = "table-row") :
    (row.style.display = "none");
}
vanowm
2021-07-23