javascript - Laravel-Html 表过滤器(排序依据)

Question

如果我单击“已验证”，它会隐藏所有状态为“未验证”的字段。但这不起作用。 有什么建议吗？

这是Html表格代码

    <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

查看下面的这段代码，最有可能的猜测是 td 索引不匹配可能导致它。计算您的 td 指数。最好是 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>