开发者社区> 问答> 正文

ASP网页汇总数据行的明细数据如何显示和隐藏?

如题,做了一个ASP网页,统计销售汇总数据。现在想实现这样一个功能,点击某一行汇总数据,其明细数据会在下方显示出来,再点击一下,明细数据会隐藏掉,请问这个功能用ASP如何实现?screenshot

展开
收起
小旋风柴进 2016-06-07 14:37:47 2426 0
1 条回答
写回答
取消 提交回答
  • 您试一试 这里用到jquery 哟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>明细数据如何显示和隐藏</title>
    <style>
    table{ border:1px solid #ddd;border-collapse:collapse;}
    td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
    th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-
    bottom:1px solid #000;width:100px;}
    .parent { background:#FF100F;cursor:pointer;}  
    .odd{ background:#FFFFEE;}   
    .selected{ background:#FF6600;color:#fff;}
    </style>
    <script src="js/jquery1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('tr.parent').click(function(){    
                $(this)
                    .toggleClass("selected")   
                    .siblings('.child_'+this.id).toggle();   
        }).click();
    })
    </script>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>地区</th><th>销售额</th><th>销售目标</th></tr>
            </thead>
            <tbody>
                <tr class="parent" id="row_01"><td >东南区</td><td>5001</td><td>71000</td></tr>
                <tr class="child_row_01"><td>东南一分部</td><td>4000</td><td>50000</td></tr>
                <tr class="child_row_01"><td>东南二分部</td><td>1000</td><td>10000</td></tr>
                <tr class="child_row_01"><td>东南三分部</td><td>1</td><td>11000</td></tr>
    
                <tr class="parent" id="row_02"><td >西南区</td><td>1233</td><td>456555</td></tr>
                <tr class="child_row_02"><td >西南一分部</td><td>1233</td><td>456555</td></tr>
                <tr class="child_row_02"><td >西南二分部</td><td>1233</td><td>456555</td></tr>
    
    <tr class="parent" id="row_03"><td >华南区</td><td>1833</td><td>456555</td></tr>
                <tr class="child_row_03"><td >华南一分部</td><td>1633</td><td>66655</td></tr>
                <tr class="child_row_03"><td >华南二分部</td><td>1633</td><td>8955</td></tr>
    
    
    
            </tbody>
        </table>
    </body>
    </html>
    2019-07-17 19:30:07
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载