Javascript 删除<；tr>；如果<；td>；不包含<；输入>；

我正试图用jQuery实现一个表的实时搜索（过滤）功能。该表包含一份人员及其毕业年份和高中的列表。当用户开始在搜索输入中输入时，表将开始过滤掉所有不包含搜索输入值的行。它还将向搜索文本所在的td添加高亮显示类

当用户搜索某个内容时，如何过滤每一行并突出显示td元素？我试着用下面的代码实现它，但没有用。我可以在这段代码中调整什么以使其正常工作

下面是我的代码。这是我的JSFIDLE：

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>

名称
等级
高中
约翰·史密斯
2014
某高中
荷马·辛普森
2015
斯普林菲尔德高中
兔八哥
2050
鲁尼曲调高中
乔治华盛顿
1749
乔治敦学院
马蒂·麦克弗利
1991
回到未来
埃米特·布朗博士
1965
1.21千兆瓦

一个问题是：

输入！==td_element.text（）

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

td_元素.text（）.indexOf（输入）=-1

但实际上存在很多问题（包括简单的语法错误，例如td_元素不是函数）。我对您的示例进行了一些调整：

---

当搜索框被清除时，你需要做更多的工作来重置td背景色。祝你好运

嗨，试试这个，它正在工作

$("#search").on("keyup", function () {
    var input = $(this).val();
    if (input == '') {
        $("#search_table tbody tr").show();
    } else {
        $("#search_table tbody tr").show();
        $("#search_table tbody tr").each(function () {
            var row = $(this);
            var td_element = $("#search_table tbody tr td");
            if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
                row.hide();
            } else {
                row.show();
            }
        });
    }
});

---

请参阅jsiddle链接

我明白了。我尝试过实现这个功能，但当搜索字段为空时，它不会返回行。你是说背景色吗？如果是这样的话，当输入为空时，通过jQuery“addClass”或“css”恢复背景颜色并不是一个巨大的飞跃。

$("#search").on("keyup", function () {
    var input = $(this).val();
    if (input == '') {
        $("#search_table tbody tr").show();
    } else {
        $("#search_table tbody tr").show();
        $("#search_table tbody tr").each(function () {
            var row = $(this);
            var td_element = $("#search_table tbody tr td");
            if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
                row.hide();
            } else {
                row.show();
            }
        });
    }
});