已解决_闭包、this疑问

向右看齐 2022-07-16 11:08 187阅读 0赞

<!DOCTYPE HTML>
    <html>
    
    <head>
    <title>new row</title>
    <mata charset="utf-8">
    <script>
    
    window.onload = function(){
        var tr=document.getElementsByTagName("tr");
        for(var i= 0;i<tr.length;i++)
        {
    		tr[i].οnmοuseοver=function(){
                tr[i].style.backgroundColor="#f2f2f2";
            }
            tr[i].οnmοuseοut=function(){
                tr[i].style.backgroundColor="#fff";
            }
    			/*bgChange(tr[i]);*/
        }
    }
    
    	/*function bgChange(obj)
    	{
    		obj.οnmοuseοver=function(){
                obj.style.backgroundColor="#f2f2f2";
            }
            obj.οnmοuseοut=function(){
                obj.style.backgroundColor="#fff";
            }
    	}*/
    	
    	function add()
    	{
    		var tr=document.createElement("tr");
    		var td_1=document.createElement("td");
    		var td_2=document.createElement("td");
    		var td_3=document.createElement("td");
    		var alink=document.createElement("a");
    		var tab=document.getElementById("table");
    		td_1.innerHTML="xh003";
    		td_2.innerHTML="张小呆";
    		alink.innerHTML="删除";
    		alink.href="javascript:;";
    		alink.οnclick="del(this)"
    		tab.appendChild(tr);
    		td_3.appendChild(alink);
    		tr.appendChild(td_1);
            tr.appendChild(td_2);
            tr.appendChild(td_3);
    		var tr=document.getElementsByTagName("tr");
    		for(var i= 0;i<tr.length;i++)
    		{
    			bgChange(tr[i]);
    		}
    	}
    	
    	function del(obj)
    	{
    		var tr=obj.parentNode.parentNode;
    		tr.parentNode.removeChild(tr);
    	}
    
    </script>
    
    <body>
    
    <table border="1" width="50%" id="table">
    	<tr>
    		<th>学号</th>
    		<th>姓名</th>
    		<th>操作</th>
    	</tr>
    	
    	<tr>
    		<td>xh001</td>
    		<td>王小明</td>
    		<td><a href="javascript:;" οnclick="del(this);">删除</a></td> 
    	</tr>
    	
    	<tr>
    		<td>xh002</td>
    		<td>刘晓芳</td>
    		<td><a href="javascript:;" οnclick="del(this);">删除</a></td> 
    	</tr>
    </table>
    
    <input type="button" value="添加一行" οnclick="add()" /> 
    
    </body>
    </head>
    
    
    </html>

解答：原来做这道例题的时候，不明白为什么注释部分的代码可以实现划过单行变色的功能，但下面的这段

for(var i= 0;i<tr.length;i++)
        {
    		tr[i].οnmοuseοver=function(){
                tr[i].style.backgroundColor="#f2f2f2";
            }
            tr[i].οnmοuseοut=function(){
                tr[i].style.backgroundColor="#fff";
            }
        }

代码却无法实现，由于初学js不懂，想了好久，看了闭包的知识，问了一些大神，但是还是没想明白，今天突然想明白了，不容易啊，其实上面这段代码在执行完以后，就相当于在每一个tr标签里加了一句：οnmοuseοver=function()\{tr\[i\].style.backgroundColor="f2f2f2"\}，加载完后i就变成了tr.length，而且函数执行完以后，变量就没了！所以当然没有作用了！相到这里我终于理解了为啥直接用this代替tr\[i\]，虽然这是个简单问题，但是今天把它想明白了，还是好开心~~