onassischen 2015-08-08 02:02 采纳率: 66.7%
浏览 1921
已采纳

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

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

  • 写回答

1条回答

  • 程序员鼓励师 2015-08-09 01:17
    关注

    您试一试 这里用到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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料