Table Column Filters

table-filter.css

.even {
    background: #ccc;
}
.odd {
    background: #fff;
}

table-filter.html

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody class="filters">
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <select>
                    <option></option>
                    <option value="a">A</option>
                    <option value="B">B</option>
                </select>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr class="even">
            <td>Leandro</td>
            <td>one</td>
            <td>A</td>
        </tr>
        <tr class="odd">
            <td>daniela</td>
            <td>Two</td>
            <td>A</td>
        </tr>
        <tr class="even">
            <td>leonardo</td>
            <td>three</td>
            <td>A</td>
        </tr>
        <tr class="odd">
            <td>Daniel Azulai</td>
            <td>FOur</td>
            <td>A</td>
        </tr>
        <tr class="even">
            <td>Daniel Boone</td>
            <td>fiVE</td>
            <td>B</td>
        </tr>
        <tr class="odd">
            <td>Eric</td>
            <td>six</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table-filter.js

var $rows = $('tbody:not(.filters) tr');

$('.filters input, .filters select')
    .on('input change propertychange', function (e) {
        e.preventDefault();
    
    	if (this.value === '') {
            $rows.show();
            return false;
        }

    	var indexColumn = $(this).parent().index(),
            data = this.value.toLowerCase();

        $rows
            .hide()
            .filter(function (i, v) {
                var $t = $(this).children(':eq(' + indexColumn + ')'),
                    $d = $t.text().toLowerCase().indexOf(data) != -1 ? true : false;

                if ($d) {
                    return true;
                }

                return false;
            })
            .show();

        $rows.removeClass("odd even");
        $rows.filter(':visible:odd').addClass("odd");
        $rows.filter(':visible:even').addClass("even");
    })
    .focus(function () {
        this.value = '';
        $rows.show();
    });