我有一个从数据库生成的 HTML 表。 它包含有关机器及其状态等的信息，这些信息是从包含有关机器的 HTML 表的电子邮件中解析出来的
这就是为什么我在每个 tr 中单击打开/隐藏
<td>在我添加 HTML 之前，所有 Java 脚本函数都有效。因为我的过滤器和搜索函数迭代
<tr><td>所以我的问题是在我的搜索功能中忽略 HTML 的最佳方法是什么？
我尝试了像
<td id ="ignore me">这是我的 HTML 表的一个非常简化的版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Table Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>machine</th>
<th>status</th>
<th>timesinceLastCheck 3</th>
<th>Original HTML from Email (Inner Table)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Inner Cell 1</td>
<td>Row 1, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 2, Inner Cell 1</td>
<td>Row 2, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 3, Inner Cell 1</td>
<td>Row 3, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 4, Inner Cell 1</td>
<td>Row 4, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>这是我的搜索/过滤功能
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("machineTable");
tr = table.getElementsByTagName("tr");
// Get selected radio button value for filter
var selectedFilter = document.querySelector('input[name="filter"]:checked').value.toUpperCase();
// Get selected radio button value for days
var selectedDays = document.querySelector('input[name="days"]:checked').value;
// Loop through all table rows
for (i = 0; i < tr.length; i++) {
if (i !== 0) { // Check if the row is not the first row (header row)
td = tr[i].getElementsByTagName("td");
alert("länge der tr")
alert (tr.length)
var matchFound = false;
// Loop through all table columns
//td.length -1 entfernt
for (var j = 0; j < 9 ; j++) {
var cell = td[j];
if (cell) {
txtValue = cell.textContent || cell.innerText;
// Check if the cell text contains the filter text, matches the selected filter, and days condition
alert(td[i]);
alert(i);
if ((selectedFilter === "ALL" || td[4].innerText.toUpperCase() === selectedFilter) &&
txtValue.toUpperCase().indexOf(filter) > -1 &&
(selectedDays === "ALL" || parseInt(td[7].innerText) >= parseInt(selectedDays))) {
matchFound = true;
break;
}
}
}
// Hide or show the row based on match
if (matchFound) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}您只能获取主表的直接子代的 tds，如下所示
let tr = table.querySelectorAll(":scope > tbody > tr > td");let table = document.getElementById("machineTable");
let tr = table.querySelectorAll(":scope > tbody > tr > td");
console.log(tr.length) // 16 - there are 16 tds in the root tabletable, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}<table id="machineTable">
<thead>
<tr>
<th>machine</th>
<th>status</th>
<th>timesinceLastCheck 3</th>
<th>Original HTML from Email (Inner Table)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Inner Cell 1</td>
<td>Row 1, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 2, Inner Cell 1</td>
<td>Row 2, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 3, Inner Cell 1</td>
<td>Row 3, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
<td>
<table>
<thead>
<tr>
<th>Inner Table Header 1</th>
<th>Inner Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 4, Inner Cell 1</td>
<td>Row 4, Inner Cell 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>