106-----JS基础-----a的索引问题

2021/11/21 23:42:07

编程Tag： js 索引 alert 超链接 ----- Tom 106 响应函数 allA

本文主要是介绍106-----JS基础-----a的索引问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一代码

下面的想表达，对比上一节的this，如果使用allA[i]代替this，for中的索引i 在响应函数时使用的一个先后顺序，导致无法确定索引i的值，所以最好不要这样使用，使用之前的this即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
	
	window.onload = function(){
		
		/*
		 * 1. 下面的想表达，for中的i索引在响应函数时使用的一个先后顺序，
		 * 导致无法确定索引i的值，所以最好不要这样使用，使用之前的this即可。
		 * 
		 * 点击超链接以后，删除一个员工的信息
		 */
		
		//获取所有额超链接
		var allA = document.getElementsByTagName("a");
		
		//为每个超链接都绑定一个单击响应函数
		for(var i=0 ; i < allA.length ; i++){
			/*
			 * 2. for循环会在页面加载完成之后立即执行，
			 * 	而响应函数会在超链接被点击时才执行
			 * 当响应函数执行时，for循环早已执行完毕
			 */
			
			alert("for循环正在执行"+i);
			
			allA[i].onclick = function(){
				
				alert("响应函数正在执行"+i);
				
				//alert(allA[i]);
				
				return false;
			};
			
		}
		
	};

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

这篇关于106-----JS基础-----a的索引问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

106-----JS基础-----a的索引问题

一 代码

相关编程文章

一代码