I have several HTML tables hided in accordions panel, I need to search into all the tables to find a row, did I miss something to deploy corresponding panel and highlight the corresponding row ?
Here is my code:
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>The result is not what I need, I just have some changes in my HTML structure, but I need my panel to be active, and after I will need to highlight the matching input with correponding rows
// use this
let x = document.querySelectorAll('td'); // select all <td> tags
// instead
let x = document.getElementsByClassName('panel'); // select first <div class="panel"> tag
Below full code :
<!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>