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

js动态显示表格的汇总信息和详细信息我在做数据结果展示的时候，想要实现一个如下的功能：
用户可以选择一个时间段，默认显示这个时间段的汇总数据，当鼠标点击这个时间段的时候，将显示每个时间点的详细数据，再次点击的时候，详细数据收起，只显示汇总信息。
功能是不是很简单？对于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说难也不难，说简单也不简单啊！