Как отфильтровать таблицу HTML на основе выбранного значения меньше значения ячейки таблицы - PullRequest
Новая
       8

Как отфильтровать таблицу HTML на основе выбранного значения меньше значения ячейки таблицы

1 голос
/ 06 мая 2020

Я хочу отфильтровать отображение таблицы из базы данных на основе выбранного значения.

Я хочу отображать строки таблицы, когда индекс 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";
        }
      }
    }
  }

введите здесь описание изображения

1 Ответ

1 голос
/ 06 мая 2020

Исправлено путем преобразования сначала в целые числа, а затем сравнения, благодаря @ 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";
        }
      }
    }
  }
...