Creé una barra de búsqueda para buscar todas las palabras clave relevantes en esta tabla. Mostrará los resultados de la fila en la tabla que puede contener la palabra clave, incluido ese hipervínculo, mostrará todos los resultados, incluido el hipervínculo... Escribí el siguiente código JavaScript, pero no funciona, como se muestra a continuación:
function myFunction() { var input, filter, table, tr, td, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("mytable"); tr = table.getElementsByTagName("tr"); td = tr.getElementByTagName("td"); for (i = 0; i < td.length; i++) { a = td[i].getElementsByTagName("a")[0]; if (a) { txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { td[i].style.display = ""; } else { td[i].style.display = "none"; } } } } <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table class="table table-striped" id="mytable"> <thead> <tr> <th scope="col">Number</th> <th scope="col">google lnk</th> <th scope="col">Random number</th> <th scope="col">Software</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a href=https://google.com>Google</a></td> <td>4</td> <td><a><b>1</b></a></td> </tr> <tr> <td>2</td> <td><a href=bing.com>bing</a></td> <td>6</td> <td> <a href="facebook.com">facebook</a>, <a href="duckduckgo.com">duckduckgo</a>, <a href="nvdia.com/">nvdia</a> </td> </tr> </tbody> </table>¿Cómo escribo el código? P/s: lo siento por mi mal inglés
Espero que esto funcione para usted:
const allDataInRows = []; const AllTRows = document.querySelectorAll("tbody tr"); AllTRows.forEach(tr => allDataInRows.push(tr.innerText)); const tableBoby = document.querySelector("tbody"); const originalData = tableBoby.innerHTML; function myFunction(el) { if (!el.value) { tableBoby.innerHTML = originalData; return; } tableBoby.innerHTML = ""; allDataInRows.forEach((adir, i) => { if (adir.toLowerCase().includes(el.value.toLowerCase())) { tableBoby.innerHTML += `<tr>${AllTRows[i].innerHTML}</tr>`; } }) } <input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name"> <table id="mytable" border> <thead> <tr> <th scope="col">Number</th> <th scope="col">google lnk</th> <th scope="col">Random number</th> <th scope="col">Software</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a href=https://google.com>Google</a></td> <td>4</td> <td><a><b>1</b></a></td> </tr> <tr> <td>2</td> <td><a href=bing.com>bing</a></td> <td>6</td> <td> <a href="facebook.com">facebook</a>, <a href="duckduckgo.com">duckduckgo</a>, <a href="nvdia.com/">nvdia</a> </td> </tr> </tbody> </table>