我在做数据结果展示的时候，想要实现一个如下的功能：
    用户可以选择一个时间段，默认显示这个时间段的汇总数据，当鼠标点击这个时间段的时候，将显示每个时间点的详细数据，再次点击的时候，详细数据收起，只显示汇总信息。
    功能是不是很简单？对于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. 依据BOM和已经存在的文件生成其他种类的文件

    在BOM中记录中有物料编码,物料名称,物料规格等,而且依据BOM已经生成了一些的文件,如采购规格书,这个时候需要生成相应的检验规格书模板,可以使用下面的VBA代码,具体代码如下: Function I ...

  2. python 对象

    python 对象 在python中,对象就是为C中的结构体在堆上申请的一块内存,一般来说,对象是不能被静态初始化的,并且不能再栈空间上生存.本文主要对Python的基本数据类型做简单的介绍. PyO ...

  3. swift 加载 storyboard 里的UIViewController

    let storyBoard:UIStoryboard! = UIStoryboard(name: "Main", bundle: nil) let deskVC:DeskView ...

  4. Redis集群~StackExchange.redis连接Sentinel服务器并订阅相关事件（原创）

    回到目录 对于redis-sentinel我在之前的文章中已经说过,它是一个仲裁者,当主master挂了后,它将在所有slave服务器中进行选举,选举的原则当然可以看它的官方文章,这与我们使用者没有什 ...

  5. [数据库连接池二]Java数据库连接池--C3P0和JDNI.

    前言:上一篇文章中讲了DBCP的用法以及实现原理, 这一篇再来说下C3P0和JDNI的用法. 1.1.C3P0数据源 C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规 ...

  6. Atitit 图像处理—图像形态学(膨胀与腐蚀)

    Atitit 图像处理-图像形态学(膨胀与腐蚀) 1.1. 膨胀与腐蚀1 1.2. 图像处理之二值膨胀及应用2 1.3. 测试原理,可以给一个5*5pic,测试膨胀算法5 1.4. Photoshop ...

  7. Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend

    Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend 1.1. Jhlabs 好像有了可以叠加算法,但是没有找到doc1 1.2. 自己算法叠加1 1.3. 使用javaf ...

  8. spring cvc-elt.1: Cannot find the declaration of element 'beans'解决办法

    转载自http://blog.csdn.net/legendj/article/details/9950963 今天在写spring aop示例的时候,在spring.xml文件中添加spring a ...

  9. andriod sdk模拟器安装过程中报错

    andriod sdk模拟器安装过程中,出现下述错误: Failed to fetch URL http://dl-ssl.google.com/android/repository/reposito ...

  10. Win10下PB停在欢迎窗口界面

    问题:Win10下不能打开PB12.5,PB12.6,一直停在欢迎窗口界面. 解决方法:把服务"Touch Keyboard and Handwriting Panel Service&qu ...