JS实现表单隔行换色，鼠标移入高亮

怼烎@ 2022-04-24 02:46 334阅读 0赞

## 简单的表单 ##

#### 鼠标移入前： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70]

#### 鼠标其中一行中后： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		div{
    			width: 80%;
    			margin: 20px auto;
    			text-align: center;
    		}
    		table{
    			margin-top: 30px;
    			border-collapse: collapse;
    		}
    		tr td,tr th{
    			border: 1px solid gray;
    			width: 300px;
    			line-height: 35px;
    			text-align: center;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<table>
    			<caption>信息表</caption>
    			<thead>
    				<tr>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>住址</th>
    				</tr>
    			</thead>
    			<tbody id="body">
    				<tr>
    					<td>001</td>
    					<td>王彬</td>
    					<td>河南省信阳市</td>
    				</tr>
    				<tr>
    					<td>002</td>
    					<td>余诺男</td>
    					<td>河南省信阳市</td>
    				</tr>
    				<tr>
    					<td>003</td>
    					<td>田定茂</td>
    					<td>河南省信阳市</td>
    				</tr>
    				<tr>
    					<td>004</td>
    					<td>翟龙伟</td>
    					<td>河南省登封市</td>
    				</tr>
    				<tr>
    					<td>005</td>
    					<td>王晓宇</td>
    					<td>河南省周口市</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    	<script type="text/javascript">
    		var tbody = document.getElementById('body');		//tbody节点
    		var cap  = document.getElementsByTagName('caption');
    
    		// console.log(cap);
    		cap[0].style.fontSize = "20px";
    		cap[0].style.fontWeight = 'bold';
    
    		for(var i = 0; i < tbody.children.length; i++) {
    			//实现隔行换色
    			if(i % 2 == 0) {
    				tbody.children[i].style.backgroundColor = 'pink';
    			}else{
    				tbody.children[i].style.backgroundColor = 'gray';
    			}
    			//实现鼠标移入高亮1
    			// tbody.children[i].onmouseenter = function () {
    			// 	oldColor = this.style.backgroundColor;
    			// 	this.style.backgroundColor = 'blue';
    			// }
    			// tbody.children[i].onmouseleave = function () {
    			// 	this.style.backgroundColor = oldColor;
    			// }
    			//实现鼠标移入高亮2
    			tbody.children[i].onmouseenter = function () {
    				this.style.backgroundColor = 'blue';
    			}
    			if(i % 2 == 0) {
    				tbody.children[i].onmouseleave = function () {
    				this.style.backgroundColor = 'pink';
    				}
    			}else{
    				tbody.children[i].onmouseleave = function () {
    				this.style.backgroundColor = 'gray';
    				}
    			}
    		}
    	</script>
    </body>
    </html>

## 上一篇博客的增加此项功能 ##

##### 完整的HTML代码可参见上一篇博客。上一篇博客地址：[JS实现简单的表单增加删除功能][JS] #####

#### 修改后的效果： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 2]

#### 鼠标移入其中一行后： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 3]  
修改后的代码：

//添加点击事件
    		btn.onclick = function () {
    			if(id.value == "" || xname.value == "" || address.value == ""){
    				alert("编号、姓名、地址不能为空！");
    				return;
    			}
    			var tr = createTr();
    			tbody.appendChild(tr);
    			id.value = '';
    			xname.value = '';
    			address.value = '';
    			//实现各行换色和鼠标移入高亮
    			// console.log(tbody.children.length);
    			for(var i = 1; i < tbody.children.length; i++) {
    				//实现各行换色
    				if( i % 2 == 0) {
    					tbody.children[i].style.backgroundColor = "#fff";
    				}else {
    					tbody.children[i].style.backgroundColor = "pink";
    				}
    
    				//实现鼠标移入高亮1
    				tbody.children[i].onmouseenter = function () {
    					this.style.backgroundColor = 'blue';
    				}
    				if(i % 2 == 0) {
    					tbody.children[i].onmouseleave = function () {
    					this.style.backgroundColor = '#fff';
    					}
    				}else{
    					tbody.children[i].onmouseleave = function () {
    					this.style.backgroundColor = 'pink';
    					}
    				}
    				//实现代码移入高亮2
    				// tbody.children[i].onmouseenter = function () {
    				// oldColor = this.style.backgroundColor;
    				// this.style.backgroundColor = 'blue';
    				// }
    				// tbody.children[i].onmouseleave = function () {
    				// 	this.style.backgroundColor = oldColor;
    				// }
    			}
    		}

#### 完整的JS代码： ####

这次完善了上一篇博文中存在的bug。JS代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70]: /images/20220221/837f001abdb34ed5b51267d641064787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 1]: /images/20220221/9d897d0808bc41e9b5d1484fa391f012.png
[JS]: https://blog.csdn.net/weixin_41355758/article/details/89159368
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 2]: /images/20220221/7c8da437d2224a9090d6d28066477b4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 3]: /images/20220221/1cbab149c62840d29d44a4c477e1fa99.png