Computer Science Hub: Styling Table with Jquery

Today we will learn how to style table with jquery.
First we have to write html code for table .

<html>
<head>

</head>
<body>
    <table id="records">
        <thead>
        <tr>
            <td>S NO</td><td>First Name</td>
            <td>Last Name</td>
            <td>Phone Number</td>
            <td>Email Address</td>
    </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Michael</td>
                <td>Jhones</td>
                <td>1111</td>
                <td>micahel@example.com</td>
            </tr>
                <tr>
                <td>2</td>
                <td>asad</td>
                <td>rind</td>
                <td>222</td>
                <td>asadrind123@gmail.com</td>
            </tr>
                <tr>
                <td>3</td>
                <td>AAA</td>
                <td>aaa</td>
                <td>222</td>
                <td>aaa@example.com</td>
            </tr>
                <tr>
                <td>4</td>
                <td>BBB</td>
                <td>bbb</td>
                <td>333</td>
                <td>bbb@example.com</td>
            </tr>
                <tr>
                <td>5</td>
                <td>CCC</td>
                <td>ccc</td>
                <td>444</td>
                <td>ccc@example.com</td>
            </tr>
        <tbody>
        </tbody>
    </table>
    </tbody>
</html>


Now for styling this table we have to write script of jquery in head section of html

Paste the following code in head of html

<script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $("#records tbody tr").css({"cursor": "hand","cursor":"pointer" });
    $("#records thead tr").css({"background-color":"#000000","color":"white"});

        $("#records tbody tr:even").css("background-color","#DEDBDE");
        $("#records tbody tr:odd").css("background-color","#FFFFFF");
        $("#records").css("border","solid 1px white");
        $('#records tbody tr:even').hover(
         function () {
           $(this).css({"background-color":"#C6DBCE"});

         },
         function () {
           $(this).css({"background-color":"#DEDBDE"});

         }
     );
         $('#records tbody tr:odd').hover(
         function () {
           $(this).css({"background-color":"#C6DBCE"});

         },
         function () {
           $(this).css({"background-color":"#FFFFFF"});

         }
     );

        });



</script>

copy code and try in browser...

Styling Table with Jquery

No comments:

Post a Comment