Question

我有两行表格，当我单击一行中的图标时，该行单独需要扩展为多行然后折叠，如果单击一行中的箭头按钮则需要多行没有箭头按钮出现，如果再次点击它，它需要上升

<!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>

Answer 1

表行必须始终是表的一部分，如果您希望这些行是某些父行的子项 - 它们必须属于它们自己的表。请考虑以下设置：

<强> 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>

在这种情况下，有一个父表有一个扩展符号 [+] 点击它我们想要显示子表行。让它最初看不见（以及应用一些演示化妆品）

<强> CSS

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

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

我们现在需要的是一些JavaScript将它粘合在一起（你的标签提到jQuery所以我使用它）：

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()
    }  
})

此代码处理单击“展开”图标并相应地隐藏或显示子行。

演示：http://jsfiddle.net/6u8cs/

将单行展开为多行

1 个答案: