javascript - 如何隐藏表中第三个单元格值与 JQuery 中给定字符串不匹配的任何行

Question

如果我有一张 table :

<table id="myTable">
     <tr>
         <td>1</td><td>2</td><td>NoMatch</td><td>4</td>
     </tr>
     <tr>
         <td>1</td><td>2</td><td>Match</td><td>4</td>
     </tr>
</table>

我一直在努力:

$(document).ready(function () {
    $('input#myInput').keyup(function (val) {
      // for each third td of each row, if this value does not contain: this.val() then hide it
    });
});

Answer 1

类似这样的事情:

var $cells = $('#myTable tr td:nth-child(3)'),
    $hidden = $();

$('#myInput').keyup(function () { 
    var search = this.value;

    var $to_hide = $cells.filter(function() {
        return $(this).text() !== search;
    }).parent();

    $hidden.not($to_hide.get()).show();
    $hidden = $to_hide.hide();
});  

我假设当您说包含时，您的意思是文本必须等于提供的输入(否则NoMatch和Match没有意义)。但是，如果单元格的内容只需包含搜索字符串作为子字符串，则可以使用 .indexOf() ^[docs] .

DEMO

还有其他一些事情你必须考虑，比如当搜索字符串为空时会发生什么，但这供你玩玩;)