加载中…css：select的鼠标经过其所在行时的背景颜色变化
(2009-11-02 20:37:30)
标签：
杂谈 |
分类： 网站开发 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色</title>
<style type="text/css" media="screen">
<!--
.mytable {border-collapse:collapse;border:solid #ffb517;border-width:1px 0 0 1px;width:100%;}
.mytable td {border:solid #ffb517;border-width:0 1px 1px 0;font-family: "Verdana,宋体";font-size: 12px;color:#827200;text-align:center;}
.t1 {background-color:#fff2d9;}
.t2 {background-color:#ffffff;}
.t3 {background-color:#ffe6b3;}
-->
</style>
</head>
<body>
<table class=mytable
id="tab">
<tr>
<td>12</td>
<td>12</td>
<td><select
size="1"
name="D1"><option>第一行的select</option></select></td>
<td><select
size="1"
name="D1"><option>第一行的select</option></select></td>
</tr>
<tr>
<td><select
size="1"
name="D1"><option>第二行的select</option></select></td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td><select
size="1"
name="D1"><option>第三行的select</option></select></td>
<td><select
size="1"
name="D1"><option>第三行的select</option></select></td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td><select
size="1"
name="D1"><option>第四行的select</option></select></td>
<td><select
size="1"
name="D1"><option>第四行的select</option></select></td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td><select
size="1"
name="D1"><option>第五行的select</option></select></td>
<td>12</td>
</tr>
<tr>
<td>无select</td>
<td>无select</td>
<td>无select</td>
<td>无select</td>
</tr>
<tr>
<td>无select</td>
<td><select
size="1"
name="D1"><option>第七行的select</option></select></td>
<td>无select</td>
<td>无select</td>
</tr>
<tr>
<td>无select</td>
<td>无select</td>
<td>无select</td>
<td>无select</td>
</tr>
<tr>
<td>无select</td>
<td>无select</td>
<td>无select</td>
<td>无select</td>
</tr>
<tr>
<td>无select</td>
<td>无select</td>
<td>无select</td>
<td>无select</td>
</tr>
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementByIdx("tab").getElementsByTagName_r("tr");
function $() {
for
(i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
var TRsel = Ptr[i-1].getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = Ptr[i-1].className;
}
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
var TRsel = this.getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = this.className;
}
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
var TRsel = this.getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = this.className;
}
};
}
//-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色</title>
<style type="text/css" media="screen">
<!--
.mytable {border-collapse:collapse;border:solid #ffb517;border-width:1px 0 0 1px;width:100%;}
.mytable td {border:solid #ffb517;border-width:0 1px 1px 0;font-family: "Verdana,宋体";font-size: 12px;color:#827200;text-align:center;}
.t1 {background-color:#fff2d9;}
.t2 {background-color:#ffffff;}
.t3 {background-color:#ffe6b3;}
-->
</style>
</head>
<body>
<table class=mytable
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementByIdx("tab").getElementsByTagName_r("tr");
function $() {
var TRsel = Ptr[i-1].getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = Ptr[i-1].className;
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
var TRsel = this.getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = this.className;
}
var TRsel = this.getElementsByTagName_r("select");
for(var k=0; k<TRsel.length;k++){
TRsel[k].className = this.className;
}
}
//-->
</script>
</body>
</html>
喜欢
0
赠金笔
前一篇：css ie bug