Jquery filter sample

by wales

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<form class="form-horizontal">
    <div class="control-group">
        <div class="input-append">
            <input type="text" name="search" id="search" class="span2" />
            <span class="add-on"><i class="icon-search"></i></span>
        </div>
    </div>
        <div class="control-group">
        <table id="datas" class="table table-hover">
            <tr>
                <td>1.</td>
                <td>aaaa</td>
                <td>aaa1</td>
                <td>aaa</td>
            </tr>
            <tr>
                <td>2.</td>
                <td>bbbb</td>
                <td>abbb</td>
                <td>aaa</td>
            </tr>
            <tr>
                <td>3.</td>
                <td>cccc</td>
                <td>ccccc</td>
                <td>ccc</td>
            </tr>
        </table>
    </div>
</form>

JavaScript

$(document).ready(function () {
    $("#search").bind('keyup', function () {
        var keyword = this;
        $("#datas tr td").css("background-color", "white");
        if ($(keyword).val() != "") $("#datas tr td:contains(" + $(keyword).val() + ")").css("background-color", "red");
    });
})