表の行(生徒名)をクリックすると、対応するレイヤー(生徒情報)が表示されます。他の行をクリックすると、元のレイヤーが非表示になります。 効果:表の行(生徒名)をクリックすると、そのレイヤーが表示されます。他の行をクリックすると、元のレイヤーが非表示になり、そのレイヤーに対応するレイヤーが表示されます。
質問: 表示レイヤーを実現するための onclick がテーブルにあります。フォーカスを失ったときにレイヤーを非表示にするために onblur と同様の操作を実行する方法を教えてください。
コード:
JavaScript:
JScript コード
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->function ShowChosen(divID){ divID.style.display='block'; div=divID; } function selectRow(rowID) { var tStu = document.getElementById("tblStudent") for(var i=0;i<tStu.rows.length;i++) //遍历所有行 { if (tStu.rows[i] != rowID) //判断是否当前选定行 { tStu.rows[i].bgColor = "#F1ECCD"; //设置背景色 tStu.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 tStu.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 } else { tStu.rows[i].bgColor = "#DCD8BF"; tStu.rows[i].onmouseover = ""; //去除鼠标事件 tStu.rows[i].onmouseout = ""; //去除鼠标事件 } } } //移过时tr的背景色 function rowOver(row) { row.bgColor='#DCD8BF'; } //移出时tr的背景色 function rowOut(row) { row.bgColor='#F1ECCD'; } //恢复tr的的onmouseover事件配套调用函数 function resumeRowOver() { rowOver(this); } //恢复tr的的onmouseout事件配套调用函数 function resumeRowOut() { rowOut(this); } function HideChosen(divID){ divID.style.display='none'; }
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><table border="0" width="100%" id="tblStudent"> <?php $sql="SELECT * FROM student ORDER BY AddTime desc"; $query=mysql_query($sql); while($row=mysql_fetch_array($query)) { ?> <tr id="r<?php echo $row['stuName']?>"; onclick="ShowChosen(<?php echo $row['stuName']?>); selectRow(r<?php echo $row ['stuName']?>)" onmouseover="rowOver(r<?php echo $row['stuName']?>)" onmouseout="rowOut(r<?php echo $row['stuName']?>)"> <td width="1%"></td> <td width="84%"> <?php echo $row['stuName']?> </td> <td width="84"></td> </tr> <?php } ?> </table>
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><?php $sql="SELECT * FROM student ORDER BY AddTime desc"; $query=mysql_query($sql); while($row=mysql_fetch_array($query)) { ?> <div style="position: relative; width: 233px; height: 135px; z-index: 2; left:5px; top:0px" id="<?php echo $row['stuName']?>" style="display:none"> <table border="0" width="100%"> <tr> <td><?php echo $row['stuInfo']?></td> </tr> </table> </div> <?php } ?>