我在做数据结果展示的时候，想要实现一个如下的功能：
    用户可以选择一个时间段，默认显示这个时间段的汇总数据，当鼠标点击这个时间段的时候，将显示每个时间点的详细数据，再次点击的时候，详细数据收起，只显示汇总信息。
    功能是不是很简单？对于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. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. [翻译]AKKA笔记 - ACTOR MESSAGING - REQUEST AND RESPONSE -3

    上次我们看Actor消息机制,我们看到开火-忘记型消息发出(意思是我们只要发个消息给Actor但是不期望有响应). 技术上来讲, 我们发消息给Actors就是要它的副作用. 这就是这么设计的.除了不响 ...

  3. 使用Vue.js时，对Chrome控制台的一点小心得

    之前对Chrome控制台的console.log()输出没太放心上,其实仔细研究后,对工作效率有显著的提示.看下面的五段代码: console.log(''); console.log(typeof ...

  4. 知方可补不足~UPDLOCK更新锁的使用

    回到目录 对于高并发的场合下,使用UPDLOCK可以有效的控制并发更新的问题,即当一个线程在进行with(UPDLOCK)并进行update时,另一个线程将被阻塞,它会等第一个线程更新结束后,才可以进 ...

  5. Atitit 编程语言知识点tech tree v2 attilax大总结

    Atitit 编程语言知识点tech tree v2 attilax大总结 大分类中分类小分类知识点原理与规范具体实现(javac#里面的实现phpjsdsl(自己实现其他语言实现 类与对象实现对象实 ...

  6. Python中的参数

    Python中的参数 1. python函数参数有多重形式: * test(arg1,arg2,`*args`) * test(arg1,arg2,`*args`,`**kwargs`) 2. 其中比 ...

  7. 行集函数：OpenRowSet 和 OpenQuery

    在SQL Server中,行集函数是不确定性的,这意味着,每次调用,返回值不总是相同的.返回值是不确定的,这意味着,对于相同的输入值,不保证每次返回的值都是相同的.对行集函数的每次调用,行集函数都是单 ...

  8. JavaScript作用域原理（一）——作用域链

    一.作用域的描述 JavaScript权威指南中对作用域有一句很精辟的描述:“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” 在JavaScript中,作用域的 ...

  9. zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

    前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了g ...

  10. Linux - 常用Shell命令

    珠玉在前,不再赘言. 对Linux新手非常有用的20个命令 对中级Linux用户非常有用的20个命令 对Linux专家非常有用的20个命令