Wednesday, November 10, 2010

Highlighting table row on mouse over using JQuery...



<table border='0'>
        <thead>
            <tr>
                <th>head 1</th>
                <th>head 2</th>
                <th>head 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
            </tr>
        </tbody>
    </table>
Demo

head 1 head 2 head 3
data 1 data 2 data 3
data 1 data 2 data 3
data 1 data 2 data 3
data 1 data 2 data 3

Piece of cake...
$(document).ready( function() {
        $('tbody tr').hover(
            function() { $(this).css('background', '#cecece'); },
            function() { $(this).css('background', '#ffffff'); }
        );
    });

No comments:

Post a Comment