JS过滤器无法正常工作。不知道为什么？

Question

Have a look on my last question

我的过滤器有什么问题？

已实施我的过滤器，但在某些特定值上无法正常使用，并且不会显示未找到记录消息。就像我在收入和得分中选择70和0一样，它可以正常工作并显示“找不到记录”消息。但是，当我分别在收入和得分中选择200和0时，它不会显示“找不到记录”消息。我无法找出问题所在。

$("#filter").click(function () {
  var tdScoring,tdEarning,hidden_rows=0;
  var scoring=$("#scoring1").val();
  var earning = $("#earning1").val();
  
  table = document.getElementById("mastermindTable");
  tr = table.getElementsByTagName("tr");
  var rows=tr.length;
    rows-=2;

 for (i = 2; i < tr.length; i++) {
   tdScoring = tr[i].getElementsByTagName("td")[4];
   tdEarning = tr[i].getElementsByTagName("td")[3];
   if (tdScoring || tdEarning) {
   if (tdScoring.innerHTML==scoring ) {
    }
    if (tdScoring.innerHTML.indexOf(scoring) == -1 || tdEarning.innerHTML.indexOf(earning) ==-1) {
      ++hidden_rows;
    }
  }
}
if(hidden_rows==rows){
  for (i = 2; i < tr.length; i++) {
      tr[i].style.display = "none";
    }
      document.getElementById('noRecordTR').style.display = "";
}

else
{
  document.getElementById('noRecordTR').style.display = "none";
  for (i = 2; i < tr.length; i++) {
   tdScoring = tr[i].getElementsByTagName("td")[4];
   tdEarning = tr[i].getElementsByTagName("td")[3];

   if (tdScoring || tdEarning) {
    if (tdScoring.innerHTML.indexOf(scoring) == 0 && tdEarning.innerHTML.indexOf(earning) == 0) {
      tr[i].style.display = ""; 
    }
    else {
      tr[i].style.display = "none";
    }
  }

}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-3 p0">
              <div class="fixed-table-toolbar">
                <div class="bars pull-left">
                  <div id="toolbar">
 <select class="form-control input_billing" id="earning1">
                      <option value="">Earning</option>
                      <option value="70">70</option>                                     
                      <option value="200">200</option>
                      <option value="0">0</option>
</select>
                  </div>
                </div>
                <div class="bars pull-left">
                  <div id="toolbar">
<select class="form-control input_billing" id="scoring1">
                        <option value="">Scoring</option>
                        <option value="12">12</option>
                        <option value="120">120</option>
                        <option value="0">0</option>
</select>
                  </div>
                </div>
<button id="filter" class="btn btn-success" style="margin-top:8px;" type="button">Filter</button>
              </div>
            </div>
<table class="table table-condensed" id="mastermindTable">
  <thead>
                  <tr>
                    <th width="18%" align="left">Name</th>
                    <th width="26%" align="left">Email </th>
                    <th width="20%" align="left">Expertise</th>
                    <th width="16%" align="left">Earning</th>
                    <th width="16%" align="left">Scoring</th>
                    <th width="4%" align="left">Status</th>
                  </tr>
                </thead>
                <tbody id="mastermindTableBody">
                <tr id="noRecordTR" style="display:none"> 
                      <td></td>
                      <td>No Record Found</td>
                      <td></td>
                      <td></td>
                      <td></td>
                     <td></td>                    
                  </tr>
                    <tr> 
                      <td>Ronald</td>
                      <td>ronald@gmail.com</td>
                      <td>PHP</td>
                      <td>70</td>
                      <td>12</td>
                     <td>Active</td>                    
                  </tr>
                  <tr> 
                      <td>Arsnel</td>
                      <td>ars@gmail.com</td>
                      <td>Larave</td>
                      <td>200</td>
                      <td>120</td>
                     <td>Active</td>                    
                  </tr>
                  <tr> 
                      <td>Abeera</td>
                      <td>abr@gmail.com</td>
                      <td>CI</td>
                      <td>0</td>
                      <td>0</td>
                     <td>InActive</td>                    
                  </tr>
                  <tr> 
                      <td>Abeera</td>
                      <td>abr@gmail.com</td>
                      <td>CI</td>
                      <td>0</td>
                      <td>0</td>
                     <td>InActive</td>                    
                  </tr>
                 
              </tbody>
            </table>

我不仅想要一个解决方案，而且最重要的是我想知道为什么我的代码无法正常工作。请任何人彻底解释。

Answer 1

您的代码有什么问题：

要了解问题，我们首先必须知道IndexOf方法的工作原理。

1-String.prototype.IndexOf（）： indexOf（）方法返回指定值首次出现的调用String对象内的索引，从fromIndex开始搜索。如果找不到该值，则返回-1。 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

2-Array.prototype.indexOf（）： indexOf（）方法返回可以在数组中找到给定元素的第一个索引；如果不存在，则返回-1。 [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf][2]

您的代码属于第一个定义，因为您正在对字符串应用IndexOf方法（可能您不知道它）。 因此，当您选择200收入和0得分并点击过滤器按钮时，第一行中没有值匹配，并且hidden_​​rows的值更新为1。 并且在第二行的收入值完全匹配，因此indexOf方法返回0进行收入，但是当过滤器搜索得分时，以120作为字符串，他发现第二个索引（从0开始）为120时为0，因此indexOf方法返回2分。因此找不到确切的值，但您的条件为假，变量hidden_​​rows没有更新。

 if (tdEarning.innerHTML.indexOf(earning) ==-1 || 
 tdScoring.innerHTML.indexOf(scoring) 
 == -1) {
  ++hidden_rows;
 }

请记住，当在字符串的任何索引上都找不到值时，indexOf方法仅返回-1。如果提供的字符数等于调用字符串的字符数，则indexof（）方法认为整个字符串的索引为0。

解决方案：

解决此问题的最简单方法是使用Array.prototype.indexOf（）： 从forloop中的每个tr中获得得分和收益的价值，并将其保存在数组中，然后在它们上应用indexOf（）。

  tdEarning[0]='';
  tdScoring[0]='';
  for (i = 2; i < tr.length; i++) {
  tdEarning[1] = tr[i].getElementsByTagName("td")[3].innerText;
  tdScoring[1] = tr[i].getElementsByTagName("td")[4].innerText;
  if (tdScoring.indexOf(scoring) >-1 && tdEarning.indexOf(earning) >-1) {
  tr[i].style.display = '';  
  }
  else {
  tr[i].style.display = 'none';
  ++hidden_rows;
  }
  }

Jsfiddle Demo is here

Answer 2

您的问题在于：

if (tdScoring.innerHTML.indexOf(scoring) == -1 || tdEarning.innerHTML.indexOf(earning) ==-1) {
  ++hidden_rows;
}

基本上，在您的代码中，您正在检查收入/得分是否出现在表格行单元格之一中。

例如：“ 120”中是否出现“ 0”？是的，它确实。

因此，您需要检查相等性（例如：“ 0”等于“ 120”吗？不是，不是）。您可以改用以下代码来做到这一点：

if (tdScoring.innerHTML.trim() != scoring || tdEarning.innerHTML.trim() != earning) {
  ++hidden_rows;
}

我还建议您使用.innerHTML的修整功能来删除字符串周围的空格，以防万一。

请参见下面的工作示例：

$("#filter").click(function() {
  var tdScoring, tdEarning, hidden_rows = 0;
  var scoring = $("#scoring1").val();
  var earning = $("#earning1").val();

  table = document.getElementById("mastermindTable");
  tr = table.getElementsByTagName("tr");
  var rows = tr.length;
  rows -= 2;

  for (i = 2; i < tr.length; i++) {
    tdScoring = tr[i].getElementsByTagName("td")[4];
    tdEarning = tr[i].getElementsByTagName("td")[3];
    if (tdScoring || tdEarning) {
      if (tdScoring.innerHTML != scoring || tdEarning.innerHTML != earning) {
        ++hidden_rows;
      }
    }
  }
  if (hidden_rows == rows) {
    for (i = 2; i < tr.length; i++) {
      tr[i].style.display = "none";
    }
    document.getElementById('noRecordTR').style.display = "";
  } else {
    document.getElementById('noRecordTR').style.display = "none";
    for (i = 2; i < tr.length; i++) {
      tdScoring = tr[i].getElementsByTagName("td")[4];
      tdEarning = tr[i].getElementsByTagName("td")[3];

      if (tdScoring || tdEarning) {
        if (tdScoring.innerHTML.indexOf(scoring) == 0 && tdEarning.innerHTML.indexOf(earning) == 0) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }

    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-3 p0">
  <div class="fixed-table-toolbar">
    <div class="bars pull-left">
      <div id="toolbar">
        <select class="form-control input_billing" id="earning1">
          <option value="">Earning</option>
          <option value="70">70</option>
          <option value="200">200</option>
          <option value="0">0</option>
        </select>
      </div>
    </div>
    <div class="bars pull-left">
      <div id="toolbar">
        <select class="form-control input_billing" id="scoring1">
          <option value="">Scoring</option>
          <option value="12">12</option>
          <option value="120">120</option>
          <option value="0">0</option>
        </select>
      </div>
    </div>
    <button id="filter" class="btn btn-success" style="margin-top:8px;" type="button">Filter</button>
  </div>
</div>
<table class="table table-condensed" id="mastermindTable">
  <thead>
    <tr>
      <th width="18%" align="left">Name</th>
      <th width="26%" align="left">Email </th>
      <th width="20%" align="left">Expertise</th>
      <th width="16%" align="left">Earning</th>
      <th width="16%" align="left">Scoring</th>
      <th width="4%" align="left">Status</th>
    </tr>
  </thead>
  <tbody id="mastermindTableBody">
    <tr id="noRecordTR" style="display:none">
      <td></td>
      <td>No Record Found</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Ronald</td>
      <td>ronald@gmail.com</td>
      <td>PHP</td>
      <td>70</td>
      <td>12</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Arsnel</td>
      <td>ars@gmail.com</td>
      <td>Larave</td>
      <td>200</td>
      <td>120</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Abeera</td>
      <td>abr@gmail.com</td>
      <td>CI</td>
      <td>0</td>
      <td>0</td>
      <td>InActive</td>
    </tr>
    <tr>
      <td>Abeera</td>
      <td>abr@gmail.com</td>
      <td>CI</td>
      <td>0</td>
      <td>0</td>
      <td>InActive</td>
    </tr>

  </tbody>
</table>