I want to filter a table's display from a database based on the selected value.
I want to display table rows when the 7th cell index of each row is less than Selected value, by comparing the integer/string value.
I found lots of examples of matching or containing criteria, but I couldn't figure out Less Than or Greater than, currently my code displays table but not working properly.
I am happy to accept jQuery if it works too.
<table id="carTable" class="table table-striped">
<thead>
<tr class="header">
<th>ID</th>
<th>Make</th>
<th>Model</th>
<th>Type</th>
<th>Seats</th>
<th>Color</th>
<th>Location</th>
<th>Price/Day
<select id='filterText' style='display:inline-block' onchange='filterPrice()'>
<option value="all" selected>All</option>
<option value='69'> < 69 </option>
<option value='100'> < 100 </option>
<option value='200'> < 200 </option>
<option value='500'> < 500 </option>
</select>
</th>
</tr>
</thead>
<tbody id="carsTable">
{%for car in cars%}
<tr>
<td>{{ car[0] }}</td>
<td>{{ car[1] }}</td>
<td>{{ car[2] }}</td>
<td>{{ car[3] }}</td>
<td>{{ car[4] }}</td>
<td>{{ car[5] }}</td>
<td>{{ car[6] }}</td>
<td>{{ car[7] }}</td>
</tr>
{%endfor%}
</tbody>
</table>
My function looks like this
function filterPrice() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("filterText");
filter = input.value;
table = document.getElementById("carTable");
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")[7];
if (td) {
cellValue = td.innerHTML;
if (cellValue <= filter) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Fixed by convert to integers first then compare, thanks to @isherwood
function filterPrice() {
// Declare variables
var input, filter, table, tr, td, i, cellValue;
input = document.getElementById("filterText");
filter = parseInt(input.value);
table = document.getElementById("carTable");
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")[7];
if (td) {
cellValue = parseInt(td.innerHTML);
if (cellValue <= filter) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.