jQuery/Javascript - 只顯示tr與td的匹配數組

Question

我試圖獲得一個表來顯示只有具有與數組的值之一相匹配的td的行。

我已經創建了一個愚蠢的代碼的特定部分jsfiddle。我不知道爲什麼這不起作用，所以將不勝感激。

不起作用的部分顯然是找到與數組值td's匹配的部分。

下面是代碼：

 $('body').on('click', '#zipButton', function() { 
        var arrayTest = [123,124,125,126] 
        var tr = find('tbody > tr'); 
        $(tr).hide(); 
          for(i=0;i<arrayTest.length;i++) { 
          $('.zipTd').each(function() { 
           ($(this).text() == arrayTest[i].toString()) ? $(this).parent().show() : $(this).parent().hide(); 
          }); 
          }; 
     }); 

http://jsfiddle.net/m4orLpd3/1/

感謝

Answer 1

您可以嘗試使用jQuery的.filter和JavaScript Array.prototype.filter做到這一點。

檢查下面的例子：

var array = [123, 124, 125, 126]; 
 

 
$('body').on('click', 'button', function() { 
 

 
    var filter = function() { 
 

 
    var match = false; 
 

 
    $(this).find('td').each(function() { 
 

 
     var currentText = $(this).text(); 
 

 
     var filtered = array.filter(function(value) { 
 
     return value == currentText; 
 
     }); 
 

 
     if (filtered.length > 0) { 
 
     match = true; 
 
     } 
 

 
    }); 
 

 
    return match; 
 

 
    }; 
 

 
    $('tr').hide().filter(filter).show(); 
 

 
});

td { 
 
    border: 1px solid #000; 
 
    padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button">trigger</button> 
 

 
<table> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>124</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>324</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>523</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>144</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
</table>

Answer 2

您可以使用過濾器這個

$('body').on('click', '#zipButton', function() { 
    var arrayTest = [123, 124, 125, 126] 
    $(".zipTd").filter(function() { 
     return arrayTest.indexOf(parseInt($(this).text().trim())) == -1 
    }).closest("tr").hide(); 
}); 

Fiddle

編輯

$('body').on('click', '#zipButton', function() { 
    $(".zipTd").closest("tr").hide(); 
    var arrayTest = [123, 124, 125, 126] 
    $(".zipTd").filter(function() { 
     return arrayTest.indexOf(parseInt($(this).text().trim())) >= 0 
    }).closest("tr").show(); 
}); 

Edited Fiddle