前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js动态显示表格的汇总信息和详细信息

js动态显示表格的汇总信息和详细信息

作者头像
全栈程序员站长
发布2022-07-15 15:22:06
2.7K0
发布2022-07-15 15:22:06
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是全栈君

我在做数据结果展示的时候,想要实现一个如下的功能: 用户可以选择一个时间段,默认显示这个时间段的汇总数据,当鼠标点击这个时间段的时候,将显示每个时间点的详细数据,再次点击的时候,详细数据收起,只显示汇总信息。 功能是不是很简单?对于javascript高手和熟手来说很简单了,不过对于我这个新人来说,还是搞了好一会儿才弄好。下面show一下我的代码,希望js高手能指点一二:

代码语言:javascript
复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <title>Ad Click _何问起 </title>
    <style type="text/css">
        .showdate{
            text-decoration:underline;
        }
        
        #forms {
            margin-top:20px;
            width:1000px;
            height:40px;
            margin:0px aut0;
            border-collapse:collapse;
            text-align:center;
        }
        #forms form{
            display:block;
            float:right;
            margin-left:10px;
        }
    </style>
        <script language="javaScript">
        function showdetails(flagname)
        {
            var t = document.getElementsByTagName('table');
        
            var reg= new RegExp(flagname);
            for (var i=0;i<t.length;i++)
            {
                var tr = t[i].getElementsByTagName('tr');
                for (var j=0; j<tr.length;j++)
                {
                    var names= tr[j].id;
                    if(reg.test(tr[j].id)) 
                    {
                        if(tr[j].style.display=='none')
                        {
                            tr[j].style.display = '';
                        }else
                        {
                            tr[j].style.display ='none';
                        }
                    }
                }
            }
        }
        </script>
</head>

<body>
<H2 align="center">
        20080411 - 20080413 PageViews
</H2>
<p>
    
<div id="forms">        
        <form  method="POST" action="" target="_self">
            开始日期:<input type="text" name="startdate" value="20080413">
            结束日期:<input type="text" name="enddate" value="20080413">
            <input type=submit value="查询">

        </form>
</div>
<table id="gross" style="" align="center" border="1" borderColor=gray cellPadding=3 class="bowser" >
<tr>
    <th>统计日期</th>
    <th>hostname</th>
    <th>PV</th>
</tr>
<tr>
    <td class="showdate" onclick="showdetails('flag0');">20080412-20080413</td>
    <td> aa.bb.com</td>
    <td>152,679</td>
</tr>
<tr id=flag0_0 style="display:none"> 
    <td>20080413</td>
    <td> aa.bb.com</td>
    <td>152,527</td>
</tr>
<tr id=flag0_1 style="display:none"> 
    <td>20080412</td>
    <td> aa.bb.com</td>
    <td>152</td>
</tr>    
<tr>
    <td class="showdate" onclick="showdetails('flag1');">20080412-20080413</td>
    <td> cc.bb.com</td>
    <td>152,679</td>
</tr>
<tr id=flag1_0 style="display:none"> 
    <td>20080413</td>
    <td> cc.bb.com</td>
    <td>152,527</td>
</tr>
<tr id=flag1_1 style="display:none"> 
    <td>20080412</td>
    <td> cc.bb.com</td>
    <td>152</td>
</tr>    
</table>
<a href="http://hovertree.com/">何问起</a>
</body>
</html>

其主要功能就是要设置好每个tr的id,然后在Javasript中调用document.getElementByTagName(‘tr’)函数找到指定的tr的object集合,然后在判断每个tr的名字是否与指定的字符串匹配(var reg= new RegExp(‘flag0’); reg.test(object.id)),如果匹配,那么就将该tr的style.display设置成显示或者不显示就ok了。

JavaScript说难也不难,说简单也不简单啊!

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120504.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年12月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档