点击所在的行变色js+css代码
作者: zms!
日期: 2013.10.26 本文发布于2346天前
分类: 前端琐碎DIV/CSS/JS
相关:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table {
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td {
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
</HEAD>
<BODY>
<tr style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
<td width="25%">one</td>
<td width="25%">two</td>
<td width="25%">three</td>
<td width="25%">four</td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td>管理员1</td>
<td>管理员1</td>
<td>管理员1</td>
<td>管理员1</td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td>管理员2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="over()" onClick="change()" onMouseOut="out()">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<SCRIPT language="JavaScript">
//鼠标点击选择行时候变色
function change(change) {
var oObj = window.event.srcElement;
//alert(change.tagName.toLowerCase());
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
for(var i=1; i<document.all.table1.rows.length; i++) {
document.all.table1.rows[i].style.backgroundColor = "";
document.all.table1.rows[i].tag = false;
}
oTr.style.backgroundColor = "#CCCCFF";
oTr.tag = true;
}
}
//鼠标点击另外一行时关闭已选行变色
function out() {
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag) oTr.style.backgroundColor = "";
}
}
//鼠标移动到选择行上时的行变色
function over(){
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag) oTr.style.backgroundColor = "#E1E9FD";
}
}
</SCRIPT>
</BODY>
</HTML></td>
</tr>
</table>
讨论区
你可能也喜欢
chm文件转换成html文件,解决chm文件无法使用浏览器打开的问题 2018.05.20,11 pv
键盘对应的键值 2018.04.15,8 pv
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 2017.09.25,9 pv
强制H5必须用微信打开的判断 2017.01.05,10 pv
MUI语法琐碎 2016.11.09,8 pv
一些前端工程师必须知道的开源前端框架 2016.11.04,12 pv