Is there anyone that may be able to help me with a javascript issue. I took ages to get this far by looking at how others have completed tables. My table is hidden on load, and shows the lines on entering a search option, then hidden when search filter is cleared. My problem is, I set this up originally by it pointing to a table ID rather than by table class and no matter how I tinker I cant get it to do the same result by table class (unfortunately I am still very new to javascript). I need it to be by table class (so it can be a snippet) as some of our topics have tabs and they want the same table to be available in multiple locations (which I would insert as a snippet, different input names pointing to a different class) in the 1 topic. My javascript fails to work correctly at the moment because it is using the same table ID - I think.
Is there anyone that could help me fix it to be by table class? Below is a link to my javascript and I have the link to the codepen below if easier:
https://codepen.io/lansta_oz/pen/LYJRjMY
Code: Select all
function tcFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("timeinput");
filter = input.value.toUpperCase();
table = document.getElementById("timecodes");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
alltags = tr[i].getElementsByTagName("td");
isFound = false;
for(j=0; j< alltags.length; j++) {
td = alltags[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.visibility = "visible";
j = alltags.length;
isFound = true;
}
}
}
if(!isFound && tr[i].className !== "header") {
tr[i].style.visibility = "collapse";
}
}
if (input.value === ''){
table.style.visibility='collapse';
}
else {
table.style.visibility='visible';
}
}