onmouseover onmouseout鼠标经历过离开行变色

       <table>
			<thead>
				<th>千机</th>
				<th>千机</th>
				<th>千机</th>
				<th>千机</th>
			</thead>
			<tbody>
				<tr>
					
				</tr>
				<tr>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
				</tr>
				<tr>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
				</tr>
				<tr>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
					<td>祁珞</td>
				</tr>
			</tbody>
		</table>

HTML代码块

       <style>
			.bg{
				background-color: pink;
			}
		</style>

CSS样式

        <script>
			//获取元素，只有一个tbody，所以只获取一个，然后获取所有的tr
			var trs = document.querySelector('tbody').querySelectorAll('tr');
			//循环
			for(var i =0;i<trs.length;i++){
				//onmouseover鼠标经过事件
				trs[i].onmouseover = function(){
					//this
					this.className = 'bg';
				}
				//onmouseout鼠标离开事件
				trs[i].onmouseout = function(){
					this.className = '';
				}
			}
		</script>

使用className修改样式