CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sree
Sree

Reputation: 1758

Expand a single row into multiple rows

I have table with two rows and when i click at icon in a row , that row alone needs to expand into multiple rows and then collapse and it is if click a arrow button in a row then multiple rows without arrow buttons need to show up and if click it back again it needs to go up 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Table</title>

    <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(){
            $("tr.oda").hide();
            $("tr.oda1").show();
            /* now if click any one of the image button it expands all the values*/

            $("tr.oda1").click(function(){
                $(this).siblings(".oda").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        });
    </script> 

<style type="text/css">
// here you can add any image you want and just check 
     div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px;      height:16px; display:block;}
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }

    body {
        margin:0;
        padding:0;
        font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
        color: #555;
        background:#f5f5f5 url(bg.jpg);
    }

    a {color:#666;}

    #content {width:65%; max-width:690px; margin:6% auto 0;}

    /*
    Pretty Table Styling
    CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
    */

    table {
        overflow:hidden;
        border:1px solid #d3d3d3;
        background:#fefefe;
        width:70%;
        margin:5% auto 0;
        -moz-border-radius:5px; /* FF1+ */
        -webkit-border-radius:5px; /* Saf3-4 */
        border-radius:5px;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    th, td {padding:18px 28px 18px; text-align:center; }

    th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}

    .directory { background:#c0c0c0; }

    .subdirectory { background:lightgrey; } 

    .subfiles { background:lightblue; }

    td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}


    td.first, th.first {text-align:left}

    td.last {border-right:none;}

    .empty {border: 10px solid transparent}
    /*
    Background gradients are completely unnecessary but a neat effect.
    */

    td {
        background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
        background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
    }



    th {
        background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
        background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
    }

    /*
    I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.
    Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius

    And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
    */

    tr:first-child th.first {
        -moz-border-radius-topleft:5px;
        -webkit-border-top-left-radius:5px; /* Saf3-4 */
    }

    tr:first-child th.last {
        -moz-border-radius-topright:5px;
        -webkit-border-top-right-radius:5px; /* Saf3-4 */
    }

    tr:last-child td.first {
        -moz-border-radius-bottomleft:5px;
        -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
    }

    tr:last-child td.last {
        -moz-border-radius-bottomright:5px;
        -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
    }

</style>

</head>
<body>
 <pre cellspacing="0">
    <tr><th class="directory">Directory Name</th><th id="occurances">No of occurances </th></tr>

    <tr class ="oda1"><td class ="subdirectory">Look at Orman's </a></td><td>100%</td> <td class ="empty"><div class="arrow"></div></td>
        </tr>

    <tr  class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
        </tr>
   <tr class = "oda"><td class="subfiles"> design into a web project</td><td>100%</td> 
        </tr>

    <tr class = "oda1"><td class ="subdirectory">Drink another cup of coffee</td><td>50%</td>    <td><div class="arrow"></div></td>
        </tr>
    <tr class = "oda"><td >Take a stretch break</td><td>0%</td>    
        </tr>
    <tr class = "oda"><td >Post this stuff on the interweb</td><td>100%</td>    <td><div class="arrow"></div></td>
        </tr>
    </pre>/* this is used instead of table tag*/
</div>
</body>
</html>

Upvotes: 1

Views: 3892

Answers (1)

Yuriy Galanter
Yuriy Galanter

Reputation: 39817

Table rows have to always be a part of the table, if you want these rows to be children of some parent row - they have to belong to their own table. Consider following setup:

HTML

<table>
    <tr>
        <td class="expand">[+]</td>
        <td>This is parent
            <table class = "child">
                <tr><td>This is child</td></tr>
                <tr><td>This is child</td></tr>
                <tr><td>This is child</td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>This is parent
        </td>
    </tr>
</table>

In this case there's a parent table that has expansion sign [+] clicking on it we want to display rows of child table. Let's make it initially invisible (as well as apply a few demo consmetics)

CSS

.child {
    display: none;
    padding-left:50px;
    color: blue;
}

.expand {
    cursor:pointer;
    vertical-align:top
}

All we need now is some JavaScript to glue it together (your tags mention jQuery so I am using it):

JavaScript:

$('.expand').click(function() {
    var $td = $(this);

    if ($td.text() == '[+]') {
        $td.text('[-]');
        $td.next().children('table').show()
    } else {
        $td.text('[+]');
        $td.next().children('table').hide()
    }  
})

This code handles click on the "expand" icon and hides or shows child rows accordingly.

Demo: http://jsfiddle.net/6u8cs/

Upvotes: 1

Related Questions