I have a table with information and a simple search function to search any value in said table.
With CSS I styled the table and gave each row padding, but when I use the search function it seems to ignore the padding.
Maybe the following code snippet is useful:
Try to search for a value that's not there like Pink. Is there a way to maintain the padding throughout the search even if no value is found?
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table td:nth-child(1) {
padding-right: 60px;
border-left: 1px solid #D3E2E8;
}
table td:nth-child(2) {
padding-right: 40px;
}
table td:nth-child(3) {
padding-right: 40px;
}
table td:nth-child(4) {
padding-right: 50px;
}
table td:nth-child(5) {
padding-right: 10px;
}
th, td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
Remove padding everywhere and replace it with some width for your th and td.
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table td:nth-child(1) {
width: 100px;
border-left: 1px solid #D3E2E8;
}
table th,
td {
width: 120px;
}
th,
td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {
background-color: #E1F1F7
}
tr:hover {
background-color: #D0E5ED
}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
<th>Shirt color</th>
<th>Favorite food</th>
</tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table{
width:100%;
}
table td{
width: 20%;
}
table td:nth-child(1) {
padding-right: 60px;
border-left: 1px solid #D3E2E8;
}
table td:nth-child(2) {
padding-right: 40px;
}
table td:nth-child(3) {
padding-right: 40px;
}
table td:nth-child(4) {
padding-right: 50px;
}
table td:nth-child(5) {
padding-right: 10px;
}
th, td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
Related
Í'm trying to make this search/filter function filter by looking at data in col0 or col1.
What I'm trying to change the JS, to look at td = tr[i].getElementsByTagName("td")[0]; and td = tr[i].getElementsByTagName("td")[1];, but can't make it work.
Code working for searching on Name (not country):
function myFunction() {
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")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
</html>
You can grab the textContent of both the columns and then display the rows where the textContent contains the filterText.
I've also made the following changes to your code:
Wrapped table heading in <thead> and table body in <tbody>.
Used Element.children to loop over all the rows in the table.
Used Element.firstElementChild & Element.lastElementChild to grab the first and second column for every row.
Used String.prototype.includes to check if the search text is present in the columns.
Passed event to the function.
let tbody = document.getElementById("table-body");
function myFunction(e) {
const filterText = e.target.value.toUpperCase();
Array.from(tbody.children).forEach((row) => {
const name = row.firstElementChild.textContent.toUpperCase();
const country = row.lastElementChild.textContent.toUpperCase();
if (name.includes(filterText) || country.includes(filterText)) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
})
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tbody>
</table>
If there are more than two columns and you want to apply filter based on all columns, then you can use Array.prototype.some and check if any of the columns contain the search text.
let tbody = document.getElementById("table-body");
function myFunction(e) {
const filterText = e.target.value.toUpperCase();
Array.from(tbody.children).forEach((row) => {
const showRow = Array.from(row.children).some(c => c.textContent.toUpperCase().includes(filterText))
if (showRow) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
})
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tbody>
</table>
You need to search in both td elements for each row. In your code you only search in the first column because for each row you consider td = tr[i].getElementsByTagName("td")[0]; which is the 'Name' col. You need to consider also the second td element: td = tr[i].getElementsByTagName("td")[1];.
In the following snippet I just add another for loop inside myFunction(). It allows to check the 'Name' column (j = 0), like you do now, and then the 'Country' column (j = 1).
function myFunction() {
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++) {
//for each row check both columns
for (j = 0; j < 2; j++){
td = tr[i].getElementsByTagName("td")[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
</html>
I'm trying to hide the whole div(where there's a table inside) when the result from filtering/searching thru the table is empty.
So far, I have this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th, .mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header, .mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
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>
<! ––hide div that doesnt have any data––>
<script>
$(function(){
var hide = true;
$('#myTable td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
</script>
</body>
</html>
As you can see, although the table is properly searched, the div and the table that has no value in its <td> is still showing.
How can I hide the whole div if the table's <td> is empty while searching it?
Your first problem is that you had several elements with the same ID, e.g. <div id="myTable1div">. I had to give them each a separate ID.
I created a helper function, hideDivs(), which counts the number of rows which are set to display: none, and if there is just one of them (i.e. the header), then hide that corresponding <div>.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th,
.mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header,
.mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable2div">
<table id="myTable2" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function hideDivs() {
['#myTable1div', '#myTable2div'].forEach(function (id) {
// From https://stackoverflow.com/a/5325109/378779
if ($(id + ' tr:not([style*="display: none"])').length == 1) {
$(id).hide();
} else {
$(id).show();
}
})
}
function myFunction() {
var input, filter, table, tr, td, i, alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function (table) {
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";
}
}
}
});
hideDivs();
}
// hide div that doesn't have any data
hideDivs();
</script>
</body>
</html>
Try checking if the element is rendered in the DOM before hiding it.
You can do this by if ($('#myTable1div').is(':visible'))
I am trying to create some conditional formatting using JavaScript and HTML.
Basically I have a table with the following fields:
table
system
timestamp
total_amount
amount_used
amount_free
What I want based on the value of the column amount_free to change the colour of the field.
In this case if my column amount_free is 0 € then I want to have the red colour on my cell.
For that I am using the following code:
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td>0 €</td>
</tr>
</table>
But it doesn't return any colour. Only the table without formating.
Can anyone help me?
$(document).ready(function() {
$('#table_id .amount_free_value').each(function() {
const value = $(this).text().split('€')[0];
if (value == 0) {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free_value">0 €</td>
</tr>
</table>
What you are trying to check is somehow wrong, you have the currency inside the text string. You don't have an id for the table and neither a class or some attribute on the amount_free value from the table.
You can do it in this way.
you have some typo in your code (style part), your table also miss the ID property and there's no TD with the amount_free class on it.
Try with:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$('#table_id td.amount_free').each(function(){
if ($(this).text() == '0 €') {
$(this).css('background-color','#f00');
}
});
});
</script>
</head>
<br><br>
<style>
table, td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table, th {
border: 1px solid black;
}
th, td {
padding: 3px;
}
th {
text-align: left;
}
th {
background-color: #f2f2f2;
}
td{
font-family: arial;
font-size: 10pt;
}
</style>
<table style=width:100% id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
You need to provide id for table tag and class name for your specific td tag in your example. So your html code would be like below:
<!–– add id to table ––>
<table id="table_id" style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<!–– add class to td ––>
<td class="amount_free">0 €</td>
</tr>
</table>
you are checking for a table with id table_id which doesn't exist. You are further checking a td-element with the class amount_free which also doesn't exist.
If you add ID and class then it will work.
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
I have an HTML table with a search field to filter the result by Name. And another field to show the Country tha correspond to the person.
Everything works fine, but when I remove the input from the search field the Country Field gets the country from last row. What I want is that, whenever the search field is empty, the country field should be empty, too.
this is the code:
function myFunction() {
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")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
document.getElementById("Res").value = tr[i].getElementsByTagName("td")[1].textContent; //traer nombre del pais indice 1
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="Res" placeholder="Country" title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
just add a check for the filter value, if it's empty, set the coutry field to empty "
if(!filter)
document.getElementById("Res").value = "";
function myFunction() {
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")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
document.getElementById("Res").value = tr[i].getElementsByTagName("td")[1].textContent;
} else {
tr[i].style.display = "none";
}
}
}
if(!filter)
document.getElementById("Res").value = "";
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="Res" placeholder="Country" title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
</html>
It took some work, but you likely want to look at this
introduces eventlisteners
creates a list of countries in the result
more elegant selections of cells using querySelectorAll and :first-child to only select relevant cells.
window.addEventListener("load", function() { // on page load
document.getElementById("myInput").addEventListener("input", function() { // any input
var filter = this.value.toUpperCase(),
td = document.querySelectorAll("#myTable tr td:first-child"); // first cells
var countries = [];
document.getElementById("Res").value = "";
for (var i = 0; i < td.length; i++) { // looping over first cells only
var txtValue = td[i].textContent || td[i].innerText, // actually textContent is well supported
found = txtValue.toUpperCase().indexOf(filter) > -1;
if (found) countries.push(td[i].nextElementSibling.textContent)
td[i].closest("tr").style.display = found ? "" : "none"; // show or hide the row
if (filter) document.getElementById("Res").value = countries.join(", ");
}
})
})
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<h2>My Customers</h2>
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">
<input type="text" id="Res" placeholder="Country" title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
i wanna filter dynamically based on content, and it works for the first 2 columns but not for the third.
Not sure about the Javascript might need a bit extra?
Here is my Snippet:
`https://www.w3schools.com/code/tryit.asp?filename=FD3GYTW0WBUK`
Here is my html:
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
<th style="width:40%;">Table</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>200</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>200</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>200</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>200</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>200</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>200</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>200</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>200</td>
</tr>
</table>
here is my JS:
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";
}
}
}
}
here is my CSS:
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
Thanks,
In your js, you say
td = tr[i].getElementsByTagName("td")[0];
With that, you test the content in tr[i] (every tr), but only in td[0], which happens to be the first column. So this script does exactly what you wrote here. You will have to iterate through all the tds in each tr as well to have this work as expected.