ホームページ  >  記事  >  バックエンド開発  >  表の行(生徒名)をクリックすると、対応するレイヤー(生徒情報)が表示され、他の行をクリックすると、元のレイヤーが非表示になります。

表の行(生徒名)をクリックすると、対応するレイヤー(生徒情報)が表示され、他の行をクリックすると、元のレイヤーが非表示になります。

WBOY
WBOYオリジナル
2016-06-13 13:10:42921ブラウズ

表の行(生徒名)をクリックすると、対応するレイヤー(生徒情報)が表示されます。他の行をクリックすると、元のレイヤーが非表示になります。 効果:表の行(生徒名)をクリックすると、そのレイヤーが表示されます。他の行をクリックすると、元のレイヤーが非表示になり、そのレイヤーに対応するレイヤーが表示されます。
質問: 表示レイヤーを実現するための 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';
}

テーブル:
HTML コード
<!--

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>


レイヤー:
HTML コード
<!--

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 
}
?>
説明: 以前、onclick の場合は ShowChosen()、onblur の場合は HideChosen() というラジオ ボタン グループを使用しましたが、テーブルの効果を持たせたいのですが、ラジオボタンは非表示にできません。
本来のアイデアは、行がクリックされていないときに selectRow() で HideChosen() を使用することですが、HideChosen(); used いいえ、括弧内の値に問題があります。

ありがとうございます!


-----解決策--------- jqueryで書いてみてはいかがでしょうか
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。