当前位置: 代码迷 >> PHP >> 点击表格行(学生姓名)时显示对应的层(学生信息),当点击其他行时原层的隐藏有关问题
  详细解决方案

点击表格行(学生姓名)时显示对应的层(学生信息),当点击其他行时原层的隐藏有关问题

热度:86   发布时间:2016-04-28 23:30:42.0
点击表格行(学生姓名)时显示对应的层(学生信息),当点击其他行时原层的隐藏问题
效果:点击表格行(学生姓名)时显示对应的层(学生信息),当点击其他行时原层隐藏,显示其对应的层。
问题:表格<tr>中有onclick可以实现显示层,如何做出类似onblur失去焦点时隐藏层的操作。
代码:
JavaScript:
JScript code
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';}


表格:
HTML code
<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>



层:
HTML code
<?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 }?>

说明:之前使用单选按钮组,onclick时ShowChosen(),onblur时HideChosen(),但是又想有表格的效果,而且单选按钮也无法隐藏掉;
原本的思路是在selectRow()中,当行没被点中时用HideChosen()的,但是HideChosen(<?php echo $row['stuName']?>);是用不了的,括号里面值的问题。

非常感谢!

------解决方案--------------------
怎么不用jquery写呢
  相关解决方案