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

最新推荐文章于 2022-07-27 16:31:15 发布

caiyl1314

最新推荐文章于 2022-07-27 16:31:15 发布

阅读量1.3w

点赞数 2

分类专栏： jquery 文章标签： javascript js 鼠标表格当前行颜色

本文链接：https://blog.csdn.net/cai7095576/article/details/21808445

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<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代码：

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

效果截图：

caiyl1314

关注

2
点赞
踩
8

收藏

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

js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid black; cursor:default; } td { border-bottom:1px
复制链接

扫一扫