点击表格行(学生姓名)时显示对应的层(学生信息)，当点击其他行时原层的隐藏有关问题
日期：2014-05-17 浏览次数：20462 次
点击表格行(学生姓名)时显示对应的层(学生信息)，当点击其他行时原层的隐藏问题
效果：点击表格行(学生姓名)时显示对应的层(学生信息)，当点击其他行时原层隐藏，显示其对应的层。
问题：表格<tr>中有onclick可以实现显示层，如何做出类似onblur失去焦点时隐藏层的操作。
代码：
JavaScript：
表格：
层：
说明：之前使用单选按钮组，onclick时ShowChosen()，onblur时HideChosen()，但是又想有表格的效果，而且单选按钮也无法隐藏掉；
原本的思路是在selectRow()中，当行没被点中时用HideChosen()的，但是HideChosen(<?php echo $row['stuName']?>);是用不了的，括号里面值的问题。
非常感谢！
------解决方案--------------------
怎么不用jquery写呢
效果：点击表格行(学生姓名)时显示对应的层(学生信息)，当点击其他行时原层隐藏，显示其对应的层。
问题：表格<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写呢
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
