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

<!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说难也不难，说简单也不简单啊！

推荐：http://www.cnblogs.com/roucheng/p/texiao.html

js动态显示表格的汇总信息和详细信息的更多相关文章

  1. php-fpm的status可以查看汇总信息和详细信息

    nginx.conf 配置文件 server { listen ; server_name localhost; index index.php index.html; root /home/tiny ...

  2. 解决 U2000 R017 安装报错: 检查SQL server数据库环境变量信息 ( 异常 ) [ 详细信息 ] PATH环境变量中缺少数据库路径的信息

    U2000 R017 安装报错: 检查SQL server数据库环境变量信息 ( 异常 ) [ 详细信息 ] PATH环境变量中缺少数据库路径的信息 管理员模式打开注册表位置: HKEY_LOCAL_ ...

  3. 利用JavaScript实现动态显示表格且对应改变按键的value值

    插入的代码并没有符合HTML5样式,只是为了实现利用JS动态显示表格,并且按键的value值会同时发生变化的功能. <!DOCTYPE > <html > <head&g ...

  4. 029. aps.net中DataView中详细信息的跳转显示

    点击当前页面的连接, 跳转到另一个页面, 然后进行更新删除等一系列操作 主要代码: <%@ Page Language="C#" AutoEventWireup=" ...

  5. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.3 Details用户详细信息]

    3.3 Details用户详细信息 用户详细信息是通过objectId获取.代码如下 public async Task<ActionResult> Details(string obje ...

  6. JS实现返回对象的详细信息

    使用JS有时会需要打印出对象的详细信息,下面方法可以实现: function ShowObjProperty(Obj) { var PropertyList=''; var PropertyCount ...

  7. js实现表格信息的删除和添加

    制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...

  8. Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息

    客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD  腾讯优图云 ...

  9. js如何实现动态显示表格数据（点奇数显示奇数单元格内容）

    js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...

随机推荐

  1. String的length()和Array的length

    String是个final修饰的最终类,不能被继承,String中属性都设置为private,方法为public,并不提供set方法,想要获得字符串的长度必须调用length()方法这个长度是确定的, ...

  2. Atitit blend mode COLOR_DODGE 混合模式  “颜色减淡”模式

    Atitit blend mode COLOR_DODGE 混合模式  "颜色减淡"模式 1.1. 混合模式是图像处理技术中的一个技术名词1 1.2. 目录1 1.3. 颜色减淡C ...

  3. Atitit 破解qq空间（2）-------探测权限

    Atitit 破解qq空间(2)-------探测权限 /AtiPlatf_cms/src/com/attilax/net/httpTest.java  package com.attilax.net ...

  4. salesforce 零基础学习（二十三）数据记录导出至excel（自定义报表导出）

    我们都知道,报表有个功能为导出excel,但是有的时候客户需求往往标准的报表达不到,比如导出excel,其中本月修改的数据字段标红,如下图所示. 这就需要我们去写VF来实现此功能. 需求:将数据表记录 ...

  5. 每天一个linux命令（15）：tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  6. 第六节：Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

  7. Javascript学习记录——数组去重

    var arr = [1, 2, 3, 5, 5, '45', '45', 4, 1, '1', '2'] for (var i = 0; i < 10000; i++) { arr.push( ...

  8. 处于同一个域中的两台Sql server 实例无法连接

    处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...

  9. LLBL Gen + Entity Framework 程序设计入门

    Entity Framework推出有好几年,除了微软的Visual Studio可以做实体框架开发外,第三方的开发工具如LLBL Gen, Devart Entity Developer也可以用来做 ...

  10. html5遵循的5个设计原则

    前面的话 实际上,html5并不是由w3c直接制定的,w3c的方向是xhtml2,而不是html5.当xhtml2脱离现实,无法付诸实践时,w3c工作组才将研究方向转向html5.为什么xhtml2从 ...