I have an html table with 4 rows and 4 columns, as shown below.
At present, selecting “1000” in the length searchbox correctly returns the 2 rows matching that search term.
However, I wish to find values in the length field greater than or less than an entered value, so that “1500” returns “2000” when I click something or the 2 rows containing “1000” if I click something else.
I thought of adding either two checkboxes that return “y” or “n” if checked, or a dropdown menu. The questions are: which is better, and how do I change the existing code to get the desired result?
Being relatively new to JS/JQuery, I cannot develop the code for greater or less, and I cannot think how to link this to the checkboxes or dropdown.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery.min.js"></script>
</head>
<body bgcolor="AED6F1">
<div class="sticky">
<center>
<p style="font-size: 2rem; font-weight: bold; color: green; position: relative;
top: 0; line-height: 0;">Search Strain Data</p>
<p style="font-size: 1rem; font-weight: bold; line-height: 0; ">Please see the <a href="search_data-help.html" target="_blank"><b>help</b></a> for further details.</p>
<form>
<div id="searchblock">
<img src="images/searchicon.png" alt="cyanobacteriota" style="width:3%"
Title="Search (case insensitive, whole or part of word)">
<input type="text" style="width:150px" id="name" placeholder="taxon name" onkeyup="searchTable()">
<input type="text" style="width:70px;" id="strain" placeholder="strain" onkeyup="searchTable()">
<input type="text" style="width:100px" id="accession" placeholder="accession" onkeyup="searchTable()">
<input type="text" style="width:47px" id="length" placeholder="length" onkeyup="searchTable()">
<input onclick="myFilterTable(true);" type="reset" class="rst" value="Reset" title="clear all queries, restore table">
</div>
</form>
<script>
function myFilterTable(clear) {
var input, filter, table, tr, td, i, xtValue;
input = document.getElementById("myInput");
filter = clear ? "" : input.value.toUpperCase();
table = document.getElementById("data_table");
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";
}
}
}
}
</script>
<table id="data_table" style="top:383px; position:sticky">
<thead>
<th id="name_col_head">taxon name (genus/species)</th>
<th id="strain_col_head">strain</th>
<th id="accession_col_head">accession</th>
<th id="length_col_head">length (bp)</th>
</thead>
<tbody>
<tr>
<td class="name_col">Jack</td>
<td class="strain_col">PC</td>
<td class="accession_col">AY</td>
<td class="length_col">1000</td>
</tr>
<tr><td class="name_col">Mike</td>
<td class="strain_col">OP</td>
<td class="accession_col">BZ</td>
<td class="length_col">1000</td>
</tr>
<tr><td class="name_col">Fred</td>
<td class="strain_col">UT9</td>
<td class="accession_col">AY</td>
<td class="length_col">1500</td>
</tr>
<tr><td class="name_col">Mike</td>
<td class="strain_col">PC</td>
<td class="accession_col">CP</td>
<td class="length_col">2000</td>
</tr>
</tbody>
</table>
<script>
function searchTable() {
// Get the search input values
var name = document.getElementById("name").value.toLowerCase();
var strain = document.getElementById("strain").value.toLowerCase();
var accession = document.getElementById("accession").value.toLowerCase();
var length =
document.getElementById("length").value.toLowerCase();
// Get the table and rows
var table = document.getElementById("data_table");
var rows = table.getElementsByTagName("tr");
// Loop through the rows and hide those that don't match the search criteria
for (var i = 1; i < rows.length; i++) { // Skip the header row
var cells = rows[i].getElementsByTagName("td");
var match1 = cells[0].innerText.toLowerCase().includes(name);
var match2 = cells[1].innerText.toLowerCase().includes(strain);
var match3 = cells[2].innerText.toLowerCase().includes(accession);
var match4 = cells[3].innerText.toLowerCase().includes(length);
if (match1 && match2 && match3 && match4) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
</script>
</body>
</html>
Hello,
I would say the dropdown menu idea is perhaps better , you can add a new input that says customize search criteria for length category and add three options for example
find the exact value (default behavior)
find values greater than or equal
find values less than or equal
In your JS code, you should customize it according to what the user selects or go with the default behavior if he does not select anything,
you can create a separate function that determines the value of the variable match4, you can use a switch statement here.
Anyway, I hope this was helpful, the exact way of implementing the code is up to you to figure it out but feel free to ask me any question
Hello,
The reply of Mohamed Amine is good, and I will go for it. But I have a major problem. Selecting a value from the dropdown menu should create a variable, how can I recover it?
Thanks for your reply. I made a dropdown menu and can recover the user choice as three variables: length:
function getlength() {
// Get the dropdown element
var dropdown = document.getElementById('myDropdown');
// Get the selected value of the dropdown, i.e. a variable
var selectedValue = dropdown.value;
alert(selectedValue);
}
(The alert is just to check, and will be removed).
I really don’t know how to proceed from here. Something like:
if (selectedValue = above) match4=???
I really am stuck! Your advice would be very welcome.
Hello,
like I said in my initial response, after storing the selected value from the dropdown menu, which is what you just did, you should know create a function that determines the value of match4 variable,
Let’s say your dropdown menu had these three options:
exact value
greater than or equal
less than or equal
the user selects the greater than or equal, so now your variable selectedValue should contain greater than or equal, you can now call a function with a name like setFilter
function setFilter(selectedValue) {
if (selectedValue === "greater than or equal") return Number(cells[3].innerText.toLowerCase()) >= Number(length)
}
You have to do the same for the other two options inside the same function and notice that I converted both cells[3].innerText.toLowerCase() and length to numbers to compare them properly
I hope this is clear
selectedValue
Thanks. I tried setting up the function to give the var match4 three possible values (greater than, less than or exact value), and removed the line match4 = cells[3].innerText.toLowerCase().includes(length);
The function is as follows:
function setlength(selectedValue) {
// Get the dropdown element
var dropdown = document.getElementById('lengthDropdown');
// Get the selected value of the dropdown, i.e. a variable
var selectedValue = dropdown.value;
if (selectedValue === "greater than") {
var match4 = return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (selectedValue === "less than") {
var match4 = return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (selectedValue === "exact value") {
var match4 = return Number(cells[3].innerText.toLowerCase()) = Number(length);
}
}
This is a bit different to yours, since I don’t want “greater than or equal”, just “greater than”, “less than” or “exact value”.
Unfortunately, it does not work! Have you any idea why?
It is because of the wrong usage of the return keyword here, it cannot be assigned to a variable, instead delete all the var match4 = inside the function then right outside of it call it and assign its value to the newly created match4 variable,
Also, if you are going to select the dropdown menu and get the selected result inside the function then there is no need to add a selectedValue parameter at the beginning of the function, you can delete it
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Thanks for your reply. Perhaps I should try to clarify two points.
You wrote:
“delete all the var match4 = inside the function then right outside of it call it and assign its value to the newly created match4 variable”
I deleted the var match4 = inside the function. But I don’t understand how to call it and assign its value… Could you please explain?
“Also, if you are going to select the dropdown menu and get the selected result inside the function then there is no need to add a selectedValue parameter at the beginning of the function, you can delete it”
Do you mean I should just change
function setLength(selectedValue) {
to
function setLength() {
Calling a function means in simple terms using it and making the code inside of it run to return a value which can be stored in a variable
Consider this example, you have a function called, let’s say, getName, you want to call it to get the value it returns but you need to store that value in a variable, let’s call it userName, so it will look like this
var userName = getName();
As for the second question, yes that is how it is done
Thanks for this info. I do know the difference between ` and ', and where to find them. However, I didn’t know that freeCodeCamp posts require separate lines of three backticks. Could you post the code you edited (I have to learn how to post correctly)?
You almost got it right; you have to write var match4 = setLength(); outside the setLength function but inside the searchTable function since there is where you are using the match4 variable.
I’m afraid it still does not work, and I don’t know why.
The `setLength` function is:
function setLength() {
// Get the dropdown element
var dropdown = document.getElementById('lengthDropdown');
// Get the selected value of the dropdown, i.e. a variable
var LenValue = dropdown.value;
if (LenValue === "greater than") {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === "less than") {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === "exact value") {
return Number(cells[3].innerText.toLowerCase()) = Number(length);
}
}
and the `searchTable` function is:
function searchTable() {
// Get the search input values
var name = document.getElementById("name").value.toLowerCase();
var strain = document.getElementById("strain").value.toLowerCase();
var accession = document.getElementById("accession").value.toLowerCase();
var length = document.getElementById("length").value.toLowerCase();
var gc = document.getElementById("gc").value.toLowerCase();
// Get the table and rows
var table = document.getElementById("data_table");
var rows = table.getElementsByTagName("tr");
// Loop through the rows and hide those that don't match the search criteria
for (var i = 1; i < rows.length; i++) { // Skip the header row
var cells = rows[i].getElementsByTagName("td");
var match1 = cells[0].innerText.toLowerCase().includes(name);
var match2 = cells[1].innerText.toLowerCase().startsWith(strain);
var match3 = cells[2].innerText.toLowerCase().startsWith(accession);
if (match1 && match2 && match3) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
var match4 = setLength();
if (match4) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
So first, make sure that the setLength function is inside the searchTable one then replace the line var match4 = cells[3].innerText.toLowerCase().includes(length); with var match4 = setLength();
Also inside the function setlength make sure that every string is wrapped in a "" not “” , I found this mistake in the strings lengthDropdown, greater than, less than and exact value , do not forget to take a look at all the other strings to see if this error exists or not
I made these changes to your code and it worked perfectly fine
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
I seem to be getting more and more lost! The line match4 = cells[3].innerText.toLowerCase().includes(length); was removed previously, and replaced with ```
return Number(cells[3].innerText.toLowerCase())
OK so far. Now I don't know how to "wrap in a `""` not `“”` " the strings you listed.
If you already made these changes, could you please post them?
the line var match4 = cells[3].innerText.toLowerCase().includes(length); was replaced by var match4 = setLength();
Here is the setLength function after I made the changes I told you about:
function setLength() {
// Get the dropdown element
var dropdown = document.getElementById("lengthDropdown");
// Get the selected value of the dropdown, i.e. a variable
var LenValue = dropdown.value;
if (LenValue === "greater than") {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === "less than") {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === "exact value") {
return Number(cells[3].innerText.toLowerCase()) = Number(length);
}
}
I suggest you use VS code editor, it can detect the strings problem easily
