html表格table实现鼠标移入移出行变色的一种可用方法

最新推荐文章于 2022-01-04 17:58:39 发布

wf_wenli

最新推荐文章于 2022-01-04 17:58:39 发布

阅读量4.8k

点赞数 4

分类专栏： Js备忘

本文链接：https://blog.csdn.net/wf_wenli/article/details/9357739

版权

Js备忘专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js代码中取表格每行，设置它们的onmouseover和onmouseout函数：

function showtable() {
	var mainTable = document.getElementById("mainTable");
	var li = mainTable.getElementsByTagName("tr");
	for ( var i = 1; i <= li.length; i++) {
		li[i].style.backgroundColor = "transparent";
		li[i].onmouseover = function() {
			this.style.backgroundColor = "#0099FF";
		}
		li[i].onmouseout = function() {
			this.style.backgroundColor ="transparent";
		}
	}
}
showtable();

html中table注意一下将table的id要设置为"mainTable"：

<html>
  <head>
    <title>鼠标移入移出行变色.html</title>
  </head>
  
  <body>
    <table id="mainTable" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="5" align="center">鼠标移入移出行变色</td>
    </tr>
    <tr >
        <td>列标题1</td>
        <td>列标题2</td>
        <td>类标题3</td>
        <td>列标题4</td>
        <td>列标题5</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
        <td>eee</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
        <td>DDD</td>
        <td>EEE</td>
    </tr>
    <tr>
        <td>FFF</td>
        <td>GGG</td>
        <td>HHH</td>
        <td>III</td>
        <td>JJJ</td>
   </tr>
</table>
  </body>

<script language="JavaScript" src="changeColor.js"></script>
</html>

效果图：