javascript - 如果 不包含 <input> 的值，则删除

Question

我正在尝试使用 jQuery 为表格实现实时搜索(过滤)功能。该表包含人员列表及其毕业年份和高中。当用户开始在搜索输入中键入内容时，表将开始过滤掉所有不包含搜索输入值的行。它还会将突出显示的类别添加到搜索文本所在的 td 中。

当用户搜索某些内容时，如何过滤每一行并突出显示 td 元素？我尝试用下面的代码来实现这一点，但没有成功。我可以在此代码中进行哪些调整才能使其正常工作？

下面是我的代码。这是我的 jsFiddle:http://jsfiddle.net/mikerodriguez/jybrnt22/2/

jQuery

$("#search").on("keyup", function(){
    var input = $(this).val();

    $("#search_table tbody tr").each(function(){

        var row = $(this);
        var td_element = $("#search_table tbody tr td");

        if(input !== td_element.text()){
            row.hide();
        }else{
            row.show();
            td_element().addClass("highlight");     
        }

    })

});

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 14px;
}
.search_field {
    padding: 15px;
}
.search_field input[type="text"] {
    padding: 15px;
    width: 98%;
    font-size: 18px;
}
.search_table_container {
    padding: 15px;
}
.search_table {
    width: 100%;
}
.search_table th {
    background-color: #AAA;
    font-weight: bold;
    padding: 10px 0px;
}
.search_table td {
    text-align: center;
    background-color: #CCC;
    padding: 15px 0px;
}

HTML

<div class="search_field">
    <input type="text" id="search" placeholder="Search for Person, Class, or High School">
</div>
<div class="search_table_container">
    <table id="search_table" class="search_table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>High School</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Smith</td>
                <td>2014</td>
                <td>Some High School</td>
            </tr>
            <tr>
                <td>Homer Simpson</td>
                <td>2015</td>
                <td>Springfield High School</td>
            </tr>
            <tr>
                <td>Bugs Bunny</td>
                <td>2050</td>
                <td>Looney Tunes High School</td>
            </tr>
            <tr>
                <td>George Washington</td>
                <td>1749</td>
                <td>Georgetown Academy</td>
            </tr>
            <tr>
                <td>Marty McFly</td>
                <td>1991</td>
                <td>Back to the Future</td>
            </tr>
            <tr>
                <td>Doc Emmet Brown</td>
                <td>1965</td>
                <td>One Point Twenty-one Gigawatts</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

一个问题是:

输入!== td_element.text()

您正在将部分输入值与列的全部内容进行比较。相反，它应该是这样的

td_element.text().indexOf(input) == -1

但实际上存在不少问题(包括简单的语法错误，例如 td_element 不是函数)。我将您的示例调整为有效的:http://jsfiddle.net/gh5kjku5/2/

$("#search").on("keyup", function(){
var input = $(this).val();

$("#search_table tbody tr").each(function(){

    var row = $(this);
    var td_elements = row.find('td');
    var colText = td_elements.text();

    if(colText.indexOf(input) == -1){
        row.hide();
    }else{
        row.show();
        td_elements.addClass("highlight");   
    }
})});

您需要做更多的工作来执行诸如在清除搜索框时重置 td 背景颜色之类的操作。祝你好运!