Я хочу отфильтровать отображение таблицы из базы данных на основе выбранного значения.
Я хочу отображать строки таблицы, когда индекс 7-й ячейки каждой строки меньше, чем выбранное значение, путем сравнения целого числа / строковое значение.
Я нашел много примеров соответствия или содержания критериев, но я не мог понять, меньше или больше, в настоящее время мой код отображает таблицу, но не работает должным образом.
Я рад примите jQuery, если он тоже работает.
<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>
Моя функция выглядит так
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";
}
}
}
}
введите здесь описание изображения