我在做数据结果展示的时候，想要实现一个如下的功能：
    用户可以选择一个时间段，默认显示这个时间段的汇总数据，当鼠标点击这个时间段的时候，将显示每个时间点的详细数据，再次点击的时候，详细数据收起，只显示汇总信息。
    功能是不是很简单？对于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. IOS Socket 01-网络协议基础知识

    1. 网络参考模型 OSI参考模型                                          TCP/IP参考模型 2. 七层简述 1)物理层:主要定义物理设备标准,如网线的接 ...

  2. 我心中的核心组件（可插拔的AOP）~第四回 异常拦截器

    回到目录 之前说过有关拦截器的文章,第二回  缓存拦截器,事实上,在那讲里说的最多是AOP和缓存组件,对于拦截的概念并没有详细的说明,这一讲,不说AOP,主要说一下拦截器,拦截器Interceptio ...

  3. 描述一下C#中索引器的实现过程，是否只能根据数字进行索引？

    不是.可以用任意类型. 索引器是一种特殊的类成员,它能够让对象以类似数组的方式来存取,使程序看起来更为直观,更容易编写. 1.索引器的定义 C#中的类成员可以是任意类型,包括数组和集合.当一个类包含了 ...

  4. iOS ---Swift学习与复习

    swift中文网 http://www.swiftv.cn http://swifter.tips/ http://objccn.io/ http://www.swiftmi.com/code4swi ...

  5. 每天一个linux命令(12)：more命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  6. Create New Commands in Tcl

    Create New Commands in Tcl eryar@163.com 摘要Abstract:Tcl/Tk脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和T ...

  7. WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单M ...

  8. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  9. Java多线程系列--“基础篇”08之 join()

    概要 本章,会对Thread中join()方法进行介绍.涉及到的内容包括:1. join()介绍2. join()源码分析(基于JDK1.7.0_40)3. join()示例 转载请注明出处:http ...

  10. Key Components and Internals of Spring Boot Framework--转

    原文地址:http://www.journaldev.com/7989/key-components-and-internals-of-spring-boot-framework In my prev ...