You are here: Home » JQuery » expand table rows with jquery

expand table rows with jquery

153 Flares 153 Flares ×

We can expand table rows with help of jquery. Here i am define table id mydata.As you run this code, you will see state list, as you click on expend button, you can see city list of that state, again you click on expend button, city list will hide. You can get expend button image click on download. Just copy and paste below code and enjoy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Expand table rows with jQuery - </title>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #mydata { border-collapse:collapse;}
        #mydata h4 { margin:0px; padding:0px;}
        #mydata img { float:right;}
        #mydata ul { margin:10px 0 10px 40px; padding:0px;}
        #mydata th { background:#7CB8E2 color:#fff; padding:7px 15px; text-align:left;}
        #mydata td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #mydata tr.odd td { background:#fff cursor:pointer; }
        #mydata div.show_hide { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #mydata div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
		
            $("#mydata tr:odd").addClass("odd");
            $("#mydata tr:not(.odd)").hide();
            $("#mydata tr:first-child").show();
            
            $("#mydata tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".show_hide").toggleClass("up");
            });
         });
    </script>        
</head>
<body>
    <h1>phpsage.com expand table rows with jquery</h1>
    <table id="mydata">
        <tr>
            <th></th>
            <th>State</th>
          
            <th></th>
        </tr>
        <tr>
            <td><div class="show_hide"></div></td>
            <td>Bihar</td>
            </tr>
        <tr>
            <td colspan="2">
                <ul>
                    <li>Patna</li>
                    <li>Gaya</li>
                    <li>Bhagalpur</li>
                    
                 </ul>   
            </td>
        </tr>
        <tr>
            <td><div class="show_hide"></div></td>
            <td>Rajsthan</td>
            </tr>
        <tr>
            <td colspan="2">
                <ul>
                    <li>Jaipur</li>
                    <li>Ajmer</li>
                    <li>Kota</li>
                    
                 </ul>   
            </td>
        </tr>
        
        <tr>
            <td><div class="show_hide"></div></td>
            <td>Maharastra</td>
            </tr>
        <tr>
            <td colspan="2">
                <ul>
                    <li>Mumbai</li>
                    <li>Pune</li>
                    <li>Nagpur</li>
                    
                 </ul>   
            </td>
        </tr>
            </table>
    
</body>
</html>

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
153 Flares Twitter 2 Facebook 1 Google+ 146 StumbleUpon 1 Pin It Share 0 LinkedIn 3 153 Flares ×