我有几个隐藏在 Accordion 面板中的 HTML 表格，我需要搜索所有表格以找到一行，我是否错过了部署相应面板并突出显示相应行的内容？
这是我的代码:
function testSearch(){
console.log("testresearch")
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('panel');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}<input
id="searchbar"
onkeyup="testSearch()"
type="text"
name="search"
placeholder="..."
/><br />
<button class="accordion button is-light">A</button>
<div class="panel" style="">
<table class="dataframe table is-hoverable is-fullwidth clickable-table">
<tbody>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</tbody>
</table>
</div>
<button class="accordion button is-light">B</button>
<div class="panel" style="">
<table class="dataframe table is-hoverable is-fullwidth clickable-table">
<tbody>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
</tbody>
</table>
</div>结果不是我需要的，我只是对我的 HTML 结构进行了一些更改，但我需要我的面板处于事件状态，之后我需要用相应的行突出显示匹配的输入
最佳答案
// use this
let x = document.querySelectorAll('td'); // select all <td> tags
// instead
let x = document.getElementsByClassName('panel'); // select first <div class="panel"> tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
</head>
<body>
<input id="searchbar" onkeyup="testSearch()" type="text" name="search" placeholder="..." autocomplete=false/><br />
<button class="accordion button is-light">A</button>
<div class="panel" style="">
<table class="dataframe table is-hoverable is-fullwidth clickable-table">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
<button class="accordion button is-light">B</button>
<div class="panel" style="">
<table class="dataframe table is-hoverable is-fullwidth clickable-table">
<tbody>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<script>
function testSearch() {
console.log("testresearch")
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
// let x = document.getElementsByClassName('panel');
let x = document.querySelectorAll('td'); // select all <td> tags instead of div.panel tag
for (i = 0; i < x.length; i++) { // for loop
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
x[i].style.background = "white"; // setting background style to normal color
}
else if(input<=0){ // if input is empty
x[i].style.display = "initial"; // set style to normal default
x[i].style.background = "white"; // background to normal
}
else { // if input contains value that matches <td> value
x[i].style.display = "initial"; // set style to normal default
x[i].style.background = "yellow"; // set background color to YELLOW as same color of highlighted text
}
}
}
</script>
</body>
</html>关于javascript - 搜索栏在几个 Accordion 中查找行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71708228/