个人中心
gpt4 book ai didi

javascript - 将单行展开为多行

转载 作者：行者123 更新时间：2023-11-28 17:54:24 25 4
gpt4 key购买 nike

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

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

最佳答案

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

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/

关于javascript - 将单行展开为多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21586824/

25 4 0
文章推荐： IOS 获取电话号码是iphone还是android
文章推荐： javascript - Phonegap Cordova 应用程序 iOS 的自定义启动页面选项(设置 self.viewController.startPage ="index.html"条件)
文章推荐： iphone - 无法将 .mp4 视频文件保存到 iphone 相机胶卷？
文章推荐： ios - 如果未配置默认邮件应用程序，是否还有其他方法可以从我的IOS应用程序发送电子邮件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com