JS表格变色点击行颜色改变

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<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;   
	     
  }   
  </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>
  <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>

提示：您可以先修改部分代码再运行

JS表格变色点击行颜色改变

相关文章

精彩推荐