Tengo varias tablas HTML ocultas en el panel de acordeones, necesito buscar en todas las tablas para encontrar una fila, ¿me perdí algo para implementar el panel correspondiente y resaltar la fila correspondiente?
Aquí está mi código:
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>El resultado no es lo que necesito, solo tengo algunos cambios en mi estructura HTML, pero necesito que mi panel esté activo, y luego tendré que resaltar la entrada coincidente con las filas correspondientes.
// use this let x = document.querySelectorAll('td'); // select all <td> tags // instead let x = document.getElementsByClassName('panel'); // select first <div class="panel"> tagDebajo del código completo:
<!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>