js实现表格变色点击行颜色改变

最新推荐文章于 2023-04-03 21:12:05 发布

xiaodanjava

最新推荐文章于 2023-04-03 21:12:05 发布

阅读量8.1k

点赞数

forword

http://blog.csdn.net/cai7095576/article/details/21808445

js实现表格变色点击行颜色改变

[html] view plain copy print ?

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<table id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<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>
</BODY>
</HTML>

<HTML>   
  <HEAD>   
  <META   http-equiv="Content-Type"   content="text/html;   charset=utf-8">   
  <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>   
  <table   id="table1"   width="50%"   border="0"   cellpadding="0"   cellspacing="0">   
      <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>
  </BODY>   
  </HTML>

js代码：

[javascript] view plain copy print ?

<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>

xiaodanjava

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现表格变色点击行颜色改变

forwordhttp://blog.csdn.net/cai7095576/article/details/21808445js实现表格变色点击行颜色改变[html] view plain copy print?HTML> HEAD> META http-equiv="Content-Type" co
复制链接

扫一扫