onkeyup gebruiken bij zoeken in tabel

Beste leden,

Ik heb een tabel gemaakt met hierin ontzettend veel rijen (handleidingen). Nu wil ik graag dat mensen hierin een handleiding kunnen zoeken op basis van een artikelnummer.

Als ik in de content de tabel aanmaak dan haalt hij onkeyup="myFunction()" weg. Dus van:

<input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Productnaam of artikelnummer…” />

maakt hij:

<input type=”text” id=”myInput” placeholder=”Productnaam of artikelnummer…” />

Hierdoor werkt het zoeken niet meer en krijg je geen resultaten te zien.

Nu zag ik dat dit een bekend probleem is, alleen is het mij (na 5 uur zoeken) niet duidelijk wat de oplossing is.

De javascript code heb ik via een plugin, genaamd Simple Custom CSS and JS, toegevoegd. Deze is als volgt:

function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById(“myInput”);
filter = input.value.toUpperCase();
table = document.getElementById(“myTable”);
tr = table.getElementsByTagName(“tr”);

// Loop through all table rows, and hide those who don’t match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName(“td”)[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = “”;
} else {
tr[i].style.display = “none”;
}
}
}
}`
`

Kan iemand mij uitleggen hoe ik het voor elkaar krijg dat onkeyup wordt toegevoegd aan de tabel?

Alvast bedankt!

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]