We Keep Coding

Set Custom attribute in Js

I am filtering a table and exporting it to excel. To exclude the filtered rows, i have to set the data-exclude="true" in the 'tr'-element
function Search() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[7];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "" ;
//Set here the Code data-exclude="false"
} else {
tr[i].style.display = "none";
//Set here the Code data-exclude="true";
}
}
}
}
``

You can update attributes for an element using setAttribute function
tr.setAttribute('data-exclude', true)
You can use getAttribute function to get the value of a specific attribute. Note that value is returned as a string and need to be converted to a boolean value in your case to filter

Trying to use an array of indexes for a custom live search via js

This is my code... I would basically like to make this line
(td = tr[i].querySelectorAll(".table-data")[0];)
I want this part...[0] to be something like this [0,5]
This is a sample code
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.querySelector("#myInput");
filter = input.value.toUpperCase();
table = document.querySelector("#myTable");
tr = table.querySelectorAll(".row");
for (i = 0; i < tr.length; i++) {
td = tr[i].querySelectorAll(".table-data")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

You need to iterate through each column as well and check if that value is found.
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.querySelector("#myInput");
filter = input.value.toUpperCase();
table = document.querySelector("#myTable");
tr = table.querySelectorAll(".row");
for (i = 0; i < tr.length; i++) {
td = tr[i].querySelectorAll(".table-data");
if (td) {
let valid = false;
for (t = 0; t < td.length; t++) {
txtValue = td[t].textContent || td[t].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
valid = true;
}
}
if (valid) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

Filtering a table in javascript

I'm trying to filter a table using a JavaScript function, but I'm not sure what the issue is...When clicking the filter link, nothing happens, but it should be filtering the second column ("Platform" column) and only displaying rows with "TEST" in it.
I'm trying to debug it here:
https://jsfiddle.net/7vh5wmsx/
function filterTable(input) {
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var tr = table.getElementsByTagName("tr");
var tds = tr.getElementsByTagName('td');
for (var i = 0; i < tr.length; i++) {
if (tds[1].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}

Use this code
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";
}
}
}
}

Filter numerical html table values, by comparison and not string search

I want to filter the numerical values of a HTML column using a direct comparison of numbers from user-input values.
This shows no output.
function myFunction2() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById('myInput2').value
var pctstr="0"
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i <= tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

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";
}
}
}
}