Laravel- Html 表格过滤器（排序依据）答案

【问题标题】：Laravel- Html Table filters (Sort by)Laravel- Html 表格过滤器（排序依据）
【发布时间】：2019-09-28 12:35:57
【问题描述】：

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

这是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>

这是表格图片

【问题讨论】：

标签： javascript jquery html filter

【解决方案1】：

查看下面的这个 sn-p，最有可能的猜测是 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>

【讨论】：

还是不行兄弟！它可以过滤 Not valid only :(
@Suvin94 大声笑没有看到你的条件实际上匹配未验证，因为字符串包含已验证

【解决方案2】：

字符串“Validated”在字符串“Not Validated”中，所以当执行indexOf时，它会返回> -1。如果目标是完全匹配，请替换：

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

与

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

【讨论】：