你的位置:首页 > Java教程

[Java教程]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说难也不难,说简单也不简单啊!

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