Testing Adding Row Alphabetically

by eventide

HTML

<div class="tables">
    <p>
        <label for="search">
            <strong>Enter keyword to search </strong>
        </label>
        <input type="text" id="search"/>
        <label>e.g. bar, parking, tv</label>
    </p>
    <table width="100%" id="tblData" class="target" bgcolor="#ACAAFC">
        <tbody>
            <tr>
                <th width="10%">#</th>
                <th width="35%">Hotel Name</th>
                <th width="55%">Facilities</th>
            </tr>
            <tr>
                <td class="odd">1</td>
                <td class="odd">Manu Maharani</td>
                <td class="odd">Attached Bath, Bar, Swimming Pool, </td>
            </tr>
            <tr>
                <td class="even">2</td>
                <td class="even">Hill View</td>
                <td class="even">TV, In-Room Safe, Bar</td>
            </tr>
            <tr>
                <td class="odd">3</td>
                <td class="odd">Hotel Suba Galaxy</td>
                <td class="odd">Paid Internet Access, Coffee Shop, Spa</td>
            </tr>
            <tr>
                <td class="even">4</td>
                <td class="even">The Residence Hotel</td>
                <td class="even">Doctor on Call, Parking</td>
            </tr>
            <tr>
                <td class="odd">5</td>
                <td class="odd">The Taj</td>
                <td class="odd">Currency Exchange, Bar, Golf</td>
            </tr>
            <tr>
                <td class="even">6</td>
                <td class="even">Mumbai Grand</td>
                <td class="even">Jacuzzi, Spa, Coffee Shop</td>
            </tr>
            <tr>
                <td class="odd">7</td>
                <td class="odd">The Promenade</td>
                <td class="odd">Cable TV, Coffee Shop, Spa</td>
            </tr>
            <tr>
                <td class="even">8</td>
                <td class="even">Hotel Regency</td>
                <td class="even">Mini Bar,Golf, Spa,...

CSS

body {
    font-family: verdana,arial;
    font-size: 13px;
    margin: 0 auto;
    width: 100%; }

.tables {
    border: 1px solid #000;
    margin: 0 auto;
    width: 600px; }

th,td { padding: 5px; }

p {
    background-color: #ACAAFC;
    padding: 10px; }

a {
    color: #fff;
    text-decoration: none; }

.even {
    background-color: #fff;
    color: #343234; }

.odd {
    background-color: #DCDEFC;
    color: #343234; }

JavaScript

$(function() {
    $('#search').keyup(function() {
        searchTable($(this).val());
    });
});

function searchTable(inputVal) {

    $('#tblData').find('tr').each(function(index, row) {

        var allCells = $(row).find('td');

        if (allCells.length > 0) {

            var found = false;

            allCells.each(function(index, td) {

                var regExp = new RegExp(inputVal, 'i');

                if (regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });

            if (found == true) $(row).show();
            else $(row).fadeOut('fast');
        } // End if (allCells...)
    }); // End #tblData selector
} // End searchTable function