为什么我可以按int而不是字符串进行筛选

Why can I filter by int but not string?

本文关键字:字符串 筛选 我可以 int 为什么      更新时间:2023-09-26

现在我有可以通过int:进行筛选的代码

<input name='tablefilter' type='checkbox' value='1' id='tablefilter1' checked/>
<label for='tablefilter1'>1</label>
<input name='tablefilter' type='checkbox' value='2' id='tablefilter2' checked/>
<label for='tablefilter2'>2</label>
<input name='tablefilter' type='checkbox' value='3' id='tablefilter3' checked/>
<label for='tablefilter3'>3</label>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody id='tablebody'>
    <tr>
      <td>1</td>
      <td>One</td>
      <td>First</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Two</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Three</td>
      <td>Third</td>
    </tr>
  </tbody>
</table>

js

/* Demo filtering table using checkboxes. Filters against first td value */
/* Set 'ready' handler' */
document.addEventListener('DOMContentLoaded', initFunc);
/* When document ready, set click handlers for the filter boxes */
function initFunc(event) {
  var filters = document.getElementsByName('tablefilter');
  for (var i = 0; i < filters.length; i++) {
    filters[i].addEventListener('click', buildAndExecFilter);
  }
}
/*
    This function gets called when clicking on table filter checkboxes.
    It builds a list of selected values and then filters the table based on that
*/
function buildAndExecFilter() {
  var show = [];
  var filters = document.getElementsByName('tablefilter');
  for (var i = 0; i < filters.length; i++) {
    if (filters[i].checked) {
      show.push(filters[i].value);
    }
  }
  execFilter(show); // Filter based on selected values
}
function execFilter(show) {
  /* For all rows of table, see if td 0 contains a selected value to filter */
  var rows = document.getElementById('tablebody').getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    var display = ""; // Default to display
    // If it is not found in the selected filter values, don't show it
    if (show.indexOf(rows[i].children[0].textContent) === -1) {
      display = "none";
    }
    // Update the display accordingly
    rows[i].style.display = display;
  }
}

http://jsfiddle.net/2Lm7pytt/3/

但是,该筛选器无法通过字符串进行筛选。例如,如果我想用"一"代替1,那就行不通了。

有人知道为什么以及解决方案是什么吗?

感谢

execFilter()方法的这些行,

 if (show.indexOf(rows[i].children[0].textContent) === -1) {
      display = "none";
    }

仅比较作为数值的索引CCD_ 2而不是其他列。

除非将这些值与所有列(rows[i].children的所有索引)进行比较,否则不会得到所需的结果。

因此,您可能不希望运行for循环来遍历rows[i].children的所有子级并比较它们的文本。

var foundResult = false;
for ( var counter = 0; counter < rows[i].children.length; counter++ )
{
   if (show.indexOf(rows[i].children[0].textContent) != -1) 
   {
       foundResult= true;
       break;
   }
}
if ( !foundResult )
{
   display = 'none';
}

你的意思是像这个

var flt = ["zero","one","two","three"];
...
var showIt = show.indexOf(rows[i].children[0].textContent) !=-1;
for (var j=0;j<show.length;j++) {
  if (flt[show[j]] == rows[i].children[1].textContent) {
    showIt=true;
    break;
  }
}
rows[i].style.display = showIt?"":"none";