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);
Related
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";
}
}
}
}
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";
}
}
}
}
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);
}
The below code search for the first column of any table on webpage, and i want to search the data from second column. what editing do i need to do to get the desired output ?
<script>
function myFunction() {
var input, filter, table, tr, td, i;
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")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
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")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
Just use index '1' of td array to get second column.
td 0 for first column , td 1 for second column
just change this line from :
td = tr[i].getElementsByTagName("td")[0];
to
td = tr[i].getElementsByTagName("td")[1];
function myFunction() {
var input, filter, table, tr, td, i;
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")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<input id="myInput" type="text" onkeyup="myFunction()"/>
<table id="myTable" border="1">
<tr><td>1</td><td>John</td></tr>
<tr><td>2</td><td>Jonny</td></tr>
<tr><td>3</td><td>Ram</td></tr>
<tr><td>4</td><td>Shyam</td></tr>
</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/