Table search Javascript and jQuery CSS

Question

I want to search as by either Players Name, Nationality, or etc due to the long list of players. What is the Javascript and jQuery to use and is there any CSS needed to be input? I have tried various articles but it won't work.

<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

Try this

$("#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