Javascript help please

This forum is for all Flare issues related to importing files or projects.
Post Reply
Lan_OZ
Jr. Propeller Head
Posts: 5
Joined: Sun Jan 22, 2023 5:35 pm

Javascript help please

Post by Lan_OZ »

Hi there
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';
}
}   
Post Reply