点击所在的行变色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