We Keep Coding

Count the number of visible rows in html table that contains a specific word

i have a csv parser in html and i want to know the the number of occurrences of a searched word in visible rows after searching for something
here is my code:
function no(){
var input, filter, table, tr, td, cell, i, j;
filter = document.getElementById("searchInput").value.toLowerCase();
table = document.getElementById("table1");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
tr[i].style.display = "none";
const tdArray = tr[i].getElementsByTagName("td");
for (var j = 0; j < tdArray.length; j++) {
const cellValue = tdArray[j];
if (cellValue && cellValue.innerHTML.toLowerCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
}
//var update = $('table tr:contains(Update)').length;
}
}
var update = $('table tr:contains(Update)').length;
update = "Update Operations: " + update
document.getElementById("update").innerHTML = update;
var HardDelete= $('table tr:contains(HardDelete)').length;
HardDelete = "HardDelete Operations: " + HardDelete
document.getElementById("HardDelete").innerHTML = HardDelete;
var SoftDelete = $('table tr:contains(SoftDelete)').length;
SoftDelete = "SoftDelete Operations: " + SoftDelete
document.getElementById("SoftDelete").innerHTML = SoftDelete;
var Create = $('table tr:contains(Create)').length;
Create = "Create Operations: " + Create
document.getElementById("create").innerHTML = Create;
}
</script>
i wrote this var Create = $('table tr:contains(Create)').length; ) like this var Create = $('table tr:contains(Create) tr:visible').length; but it wont work.

How can I get a search filter to loop through MULTIPLE data types in a stock items table, and narrow down what results displayed?

Please excuse me if I use the wrong terminology.
I have working javascript code in a php file which filters what data is displayed in a table of stock items on a WordPress page front-end.
i.e. search by serial number and the more you type the less items are shown on a WordPress front-end until one unique item is found.
Client wants to be able to search in a variety of ways - and I can change which single topic is being searched e.g. I can get it to search by dispatch number, serial, asset type, description etc, but cannot get the search to look at all the topics. i.e. the id in the code only allows me to choose one of the elements
If I change the "1" here to "2" or "3" etc it chnages the search focus from column 1 to 2 to 3 etc.
td = tr[i].getElementsByTagName("td")[1];
Can anyone suggest how to search all the data at the same time?
<script>
function helloWorld() {
var input, filter, table, tr, td, sn, ty, own, i, id;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("adminTable");
tr = table.getElementsByTagName("tr");
var data = new Array();
// 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) {
if(td.children[0].checked) {
sn = tr[i].getElementsByTagName("td")[4];
ty = tr[i].getElementsByTagName("td")[9];
id = tr[i].getElementsByTagName("td")[10];
own = tr[i].getElementsByTagName("td")[11];
var record = {serial: sn.textContent || sn.innerText, type: ty.textContent || ty.innerText, id: id.textContent || id.innerText, owner: own.textContent || own.innerText};
data.push(record);
}
}
}
if(data.length > 0) {
var uri = JSON.stringify(data);
var res = encodeURIComponent(uri);
window.location.href = '../stock?transferData='.concat(res);
}
}
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("adminTable");
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")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
enter image description here

This javascript https://fusejs.io/ search library might be all you need. You might need to map your WP data first but this will let you search for anything you want.

Try this:
Replace
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
by this
(Set column numbers you need in the [1,4,5] list)
var columns = [1,4,5];
// Loop through all table rows, and hide those who don't match the search query
for (var j=0, lenj=columns.length; j < lenj; j++) {
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[columns[j]];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

javascript: add floats in loop

I have a filter function, based on this that hides table rows. I want to add the float values from the table if the row is not being hidden and then replace the original sum field below the table. So far I got the following, but for some reason it won't work and I can't figure out why:
function filter() {
var input, filter, table, tr, origresults, origsum, newresults, newsum, td, i;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("list");
tr = table.getElementsByTagName("tr");
origresults = document.getElementById("results");
origsum = document.getElementById("sum");
newresults = 0;
newsum = 0.0;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
newresults++;
newsum += parseFloat(td);
} else {
tr[i].style.display = "none";
}
}
}
origresults.innerHTML = newresults;
origsum.innerHTML = parseFloat(newsum).toFixed(2);
}
It always says NaN, but I can't figure out why.
newsum = parseFloat(newsum) + parseFloat(td); doesn't work either.

My mistake was to calculate with td instead of td.innerHTML. So the parseFloat function returned a NaN because td obviously contains the complete tag and not just it's content.
This works:
function filter() {
var input, filter, table, tr, origresults, origsum, newresults, newsum, td, i;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("list");
tr = table.getElementsByTagName("tr");
origresults = document.getElementById("results");
origsum = document.getElementById("sum");
newresults = 0;
newsum = 0.0;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
newresults++;
newsum += parseFloat(td.innerHTML);
} else {
tr[i].style.display = "none";
}
}
}
origresults.innerHTML = newresults;
origsum.innerHTML = parseFloat(newsum).toFixed(2);
}

How to use same javascript filter twice in the same page with different tables?

I wanted to use the same javascript filter on the same page but with two or three different tables and different input field. Here below is the script I've been using to filter out dates on a table.
What if there are 2 or more tables?
function filterFunction() {
var input, filter, table, tr, td, i, totalViewable = 0;
input = document.getElementById("event_date_range");
filter = input.value.toUpperCase();
table = document.getElementById("dateTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
tds = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
totalViewable += parseFloat(tds.innerHTML);
document.getElementById("total_amount_td").innerHTML = "$" + totalViewable.toFixed(2);
} else {
tr[i].style.display = "none";
}
}
}
}
Table - dataTable
Input field - event_date_range
Output text - total_amount_td

Pass the table, input and total_amount_id as parameters to your filterFunction:
Something like:
function filterFunction(table, input, total_amount_id) {
var filter, tr, td, i, totalViewable = 0;
filter = input.value.toUpperCase();
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
tds = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
totalViewable += parseFloat(tds.innerHTML);
document.getElementById(total_amount_id).innerHTML = "$" + totalViewable.toFixed(2);
} else {
tr[i].style.display = "none";
}
}
}
}
And then call the function with different parameters:
var table1 = document.getElementById("dateTable");
var input1 = document.getElementById("event_date_range");
var total_amount_id1 = "total_amount_td";
filterFunction(table1, input1, total_amount_id1);
var table2 = document.getElementById("dateTable2");
var input2 = document.getElementById("event_date_range2");
var total_amount_id2 = "total_amount_td2";
filterFunction(table2, input2, total_amount_id2);

Using JavaScript to filter/search table

First of all, I'm not an expert in JavaScript, so the answer will probably be simple, but currently I'm using this (https://www.w3schools.com/howto/howto_js_filter_table.asp) tutorial to filter through a table, but you can only search in 1 column, so in this example only for Name or Country, but I want to search in both columns at the same time.
What do I need to change in this code?
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
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) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
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]; // This code only get the frist "TD" element
tds = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
td = tds[j];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
}

You can convert the HTMLCollection returned by getElementsByTagName to an Array (check this answer for ways to do it) and then use the some method to check if 'some' of the tdvalues match your filter. If there is a match, display them. Else hide them. Here's the code:
function myFunction() {
const input = document.getElementById('myInput')
const filter = input.value.toLowerCase()
const table = document.getElementById('myTable')
const tr = [...table.getElementsByTagName('tr')]
tr.forEach((t) => {
const foundMatch = [...t.getElementsByTagName('td')].some((td) => {
return td.innerHTML.toLowerCase().indexOf(filter) > -1
})
if (foundMatch) {
t.style.display = ''
} else {
t.style.display = 'none'
}
})
}
Check it in action on jsfiddle: https://jsfiddle.net/marcusmonteiro/hsdyajbn/2/show/