javascript - 表搜索 Javascript 和 jQuery CSS

Question

由于球员名单很长，我想按球员姓名、国籍等进行搜索。使用的Javascript和jQuery是什么？是否需要输入任何CSS？我尝试过各种文章，但行不通。

<input type="text" id="search" placeholder="Search Player"></input>

<table class="playersindex">
    <thead>
        <tr>
            <th class="wrapper-top" colspan="7">PLAYERS INDEX / 2013-14 / <span style="color: #ff3333;">SSSC</span></th>
        </tr>
        <tr>
            <th width="23">NO.</th>
            <th class="player">PLAYER</th>
            <th></th>
            <th width="105">POSITION</th>
            <th width="30">AGE</th>
            <th width="105">NATIONALITY</th>
            <th width="105">FIRST SEASON</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="number">1</td>
            <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Kevin Siew</a></td>
            <td class="playerphoto"></td>
            <td>Goalkeeper</td>
            <td>23</td>
            <td>Singaporean</td>
            <td>2010/11</td>
        </tr>
        <tr>
            <td class="number">2</td>
            <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Mohamad Hairul</a> (C)</td>
            <td class="playerphoto"></td>
            <td>Goalkeeper</td>
            <td>23</td>
            <td>Singaporean</td>
            <td>2010/11</td>
        </tr>
        <tr>
            <td class="number">3</td>
            <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Nazir Samaluddin</a></td>
            <td class="playerphoto"></td>
            <td>Goalkeeper</td>
            <td>23</td>
            <td>Singaporean</td>
            <td>2010/11</td>
            ....
        <tr>
            <th width="23">NO.</th>
            <th class="player">PLAYER</th>
            <th></th>
            <th width="105">POSITION</th>
            <th width="30">AGE</th>
            <th width="105">NATIONALITY</th>
            <th width="105">FIRST SEASON</th>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th class="wrapper-bottom" colspan="7">LAST UPDATED:  10 December 2013, 1720</th>
        </tr>
    </tfoot>
</table>

<script type="text/Javascript">
    $("#search").keyup(function() {
        var value = this.value;

        $("table.playersindex").find("tr").each(function(index) {
            if (!index) return;
            var id = $(this).find("td").first().text();
            $(this).toggle(id.indexOf(value) !== -1);
        });
    });
</script>

Answer 1

试试这个

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

DEMO