使用JavaScript得到隔行变色

最新推荐文章于 2023-11-19 11:09:06 发布

asnone0

最新推荐文章于 2023-11-19 11:09:06 发布

阅读量274

点赞数

分类专栏：代码文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_53912756/article/details/128027333

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">

 table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
	.bg{
		background-color: pink;
	}
</style>
<body>
	<table>
		<thead>
        <tr>
            <th>代码</th>
            <th>名称</th>
            <th>最新公布净值</th>
            <th>累计净值</th>
            <th>前单位净值</th>
            <th>净值增长率</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
            <!-- <td> 元素 定义了一个包含数据的表格单元格 
                <tr>代表行-->
        </tr>
    </tbody>
	</table>
    <script type="text/javascript">
    	//获取元素 获取tbody里面的行
    	var trs = document.querySelector('tbody').querySelectorAll('tr');
    	for(var i = 0;i < trs.length;i++){
    		//鼠标经过事件 onmouseover
    		trs[i].onmouseover = function(){
    			// console.log(11);
    			this.className = 'bg';
    		}
    		//鼠标离开 onmouseout
    		trs[i].onmouseout = function(){
    			this.className = '';
    		}
    		

    	}
    </script>
</body>
</html>