期望的结果:将 .csv 文件中的数据输入到 PHP 中。从 .csv 文件中获取数据并存储到一个数组中。使用 PHP 将数组存储到 HTML 表中。使用搜索引擎通过 JavaScript 筛选行。
我在 JavaScript 中收到以下错误: 未捕获的类型错误:无法读取 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”以确定它是否与搜索引擎中的文本匹配。
如果该信息有用，则在合并行时，Array 是一个 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 & 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>
最佳答案
- 您的 HTML 表格标记不正确。带有
<th>的行s 应该进入<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>关于javascript - 使用 JavaScript 过滤 HTML 表格 - textContent 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68498218/