我在做數據結果展示的時候，想要實現一個如下的功能：
用戶可以選擇一個時間段，默認顯示這個時間段的匯總數據，當鼠標點擊這個時間段的時候，將顯示每個時間點的詳細數據，再次點擊的時候，詳細數據收起，只顯示匯總信息。
功能是不是很簡單？對於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說難也不難，說簡單也不簡單啊！