Lista telefônica

by Luiz Silva

HTML

<table>
    <thead>
        <tr>
            <th><div>Nome</div><div><input id="filtro-nome"/></div></th>
            <th>Telefone</th>
            <th>Ramal</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ana</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
        <tr>
            <td>João</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Luiz</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Mário</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Rodrigo</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Silvana</td>
            <td>3333-3333</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
}
table thead tr {
    background-color: #ddd;
    border-bottom: 2px solid #fff;
}

table th, table td {
    padding: 2px 10px;
}
}

JavaScript

$('#filtro-nome').keyup(function() {
    var nomeFiltro = $(this).val().toLowerCase();
    console.log(nomeFiltro);
    $('table tbody').find('tr').each(function() {
        var conteudoCelula = $(this).find('td:first').text();
        console.log(conteudoCelula);
        var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
        $(this).css('display', corresponde ? '' : 'none');
    });
});