Laravel- Html Настольные фильтры (Сортировать по)

Question

Если я нажму кнопку «Подтверждено», предполагается, что все поля со статусом «Не подтвержден» скрыты.Но это не работает.Любое предложение?

Вот Html table коды

    <div class="col-sm-8">
        <div class="filter-group">
        <label>Status</label>

        <select style="width:150px;" id="mylist" onchange="myFunction2()" class="form-control">
        <option>Validated</option>
        <option>Not Validated</option>

        </select>
        </div>
        <span class="filter-icon"><i class="fa fa-filter"></i></span>
        </div>
        </div>

Вот javascript

                <script>
            function myFunction2() {
                var input, filter, table, tr, td, i;
                input = document.getElementById("mylist");
                filter = input.value.toUpperCase();
                table = document.getElementById("myTable");
                tr = table.getElementsByTagName("tr");
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[5];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>

Вот изображение таблицы

Answer 1

Строка «Validated» находится внутри строки «Not Validated», поэтому при выполнении indexOf она вернет > -1 .Если цель точно соответствует, замените:

if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

на

if (td.innerHTML.toUpperCase() === filter) {

Answer 2

Извлеките этот фрагмент ниже, наиболее вероятное несоответствие индекса тд может вызвать его.Посчитай тд индекс.Лучше всего было бы console.log(td), чтобы

function myFunction2() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    // console.log(i, td); // add this to find out what you are comparing with
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) ===0) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="col-sm-8">
  <div class="filter-group">
    <label>Status</label>

    <select style="width:150px;" id="mylist" onchange="myFunction2()" class="form-control">
      <option>Validated</option>
      <option>Not Validated</option>
      
      

    </select>
  </div>
  <span class="filter-icon"><i class="fa fa-filter"></i></span>
</div>

<table id="myTable">
  <tr><td>1</td><td>Validated</td></tr>
  <tr><td>2</td><td>Not Validated</td></tr>
  <tr><td>3</td><td>Validated</td></tr>
  <tr><td>4</td><td>NotValidated</td></tr>
  <tr><td>5</td><td>Not Validated</td></tr>
</table>