Почему я могу фильтровать int, но не строку?

Question

Сейчас у меня есть код, который может фильтровать по междунар:

<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, это не сработает.

Кто-нибудь знает, почему и какое решение будет?

Спасибо

Answer 1

Этих линий вашего метода execFilter(),

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

только сравнивающих индекс 0, который является числовым значением не другие столбцов.

Если вы не сравните значения со всеми столбцами (все индексы 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'; 
} 

Answer 2

Вы имеете в виду что-то вроде этого

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";