البحث داخل جدول عن طريق الjquery

السلام عليكم ورحمة الله وبركاته
اليوم اتيت لكم بطريقة عمل جدول به خاصية البحث عن طريق الjquery 
مثال على الدرس Table Filter Bootstrap + Jquery - JSFiddle
طبعا الدرس يحتاج انك تعرف BOOTSTRAP 

اذا كنت لاتعرف bootstrap ممكن انك تتعلمه عن طريق http://www.youtube.com/watch?v=-rct0ZvmX5M
او انك تاخذ الكود كامل من ديه الصفحة [HTML 5] الكود كامل لطريقة البحث داخل الجدول عن طريق الjquery - Pastebin.com نسخ لصق

الطريقة انك تضع كود الhtml هذا داخل كود الbootstrap

رمز PHP:

<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>  

وتضع ده الكود داخل الjquery

رمز PHP:

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});  

وبهذا يكون الكود كامل كده
[HTML 5] الكود كامل لطريقة البحث داخل الجدول عن طريق الjquery - Pastebin.com

وللمزيد من الدروس :دوروسانيا