JS实现表单隔行换色，鼠标移入高亮_js鼠标移动高亮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41355758/article/details/89219349

简单的表单

鼠标移入前：

在这里插入图片描述

鼠标其中一行中后：

在这里插入图片描述

<!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实现简单的表单增加删除功能

修改后的效果：

在这里插入图片描述

鼠标移入其中一行后：

在这里插入图片描述
修改后的代码：

//添加点击事件
		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代码如下：

<script type="text/javascript">
		var id = document.getElementById('txt1');			//编号
		var xname = document.getElementById('txt2');		//姓名
		var address = document.getElementById('txt3');		//地址
		var btn = document.getElementById('btn');			//添加按钮
		var tbody = document.getElementById('body');		//tbody节点
		var cap  = document.getElementsByTagName('caption');


		// console.log(cap);
		cap[0].style.fontSize = "20px";
		cap[0].style.fontWeight = 'bold';


		//添加点击事件
		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;
				// }
			}
		}

		
		

		//创建行
		function createTr() {
			var tr = document.createElement('tr');
			var td1 = createCell(id.value,false);
			var td2 = createCell(xname.value,false);
			var td3 = createCell(address.value,false);
			var td4 = createCell("删除",true);
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.style.backgroundColor = 'pink';

			return tr;
		}

		//创建每一行中的列
		function createCell(value,isLink) {
			var cell = document.createElement('td');
			if(isLink){
				var link = document.createElement('a');
				link.href = '#';
				link.innerHTML = value;
				cell.appendChild(link);

				//点击删除时，删除一行
				link.onclick = function () {
					if(confirm('是否删除？')){
						var tr = this.parentNode.parentNode;
						tr.parentNode.removeChild(tr);
					}
				}
			}else{
				cell.innerHTML = value;
			}
			
			return cell;
		}


	</script>