为什么三个function都没有效果

源自：9-22 编程练习

为什么三个function都没有效果

改变背景，添加一行和删除，这三个function我的code都没有working, 希望大家帮忙看看问题在哪里，谢谢。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
  
      window.onload = function(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var tr = document.getElementsByTagName(tr); 
		for (var i=0; i<tr.length;i++){
    	 background(tr[i]);   
		}
        function background(obj){
            obj.onmouseover = function(){
                obj.style.backgroundColor = "#f2f2f2";
            }
            obj.onmouseout = function(){
                obj.style.backgroundColor = "#fff";
            }    
            }
            
        }
     
	 
	 }
     var num = 2
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function add(){
         num ++;
         var tr1 = document.createElement("tr");
         var td1 = document.createElement("td");
         var td2 = document.createElement("td");
         var td3 = document.createElement("td");
         td1.innerHTML = "xh00"+num;
         td2.innerHTML = num;
         td3.innerHTML = "<a href="javascript:;" >删除</a>";
         var tr = document.getElementsByTagName("tr");
         tr.parentNode.lastChild.appendChild(tr1);
         tr1.appendChild(td1);
         tr1.appendChild(td2);
         tr1.appendChild(td3);
         
     }
     
     function delete(obj){
         var tr = obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }		
   	 
     // 创建删除函数
     


  </script> 
 </head> 
 <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:;" onclick="delete(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>刘小芳</td>
		<td><a href="javascript:;" onclick="delete(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>  

	   </table>
	   <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

提问者：这个名字可以吗 2015-08-29 11:40

个回答

非常OK

2015-08-29 22:08:31

已采纳

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
      window.onload = function(){
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var tr = document.getElementsByTagName(tr);
        for (var i=0; i<tr.length;i++){
         background(tr[i]);
        }
        function background(obj){
            obj.onmouseover = function(){
                obj.style.backgroundColor = "#f2f2f2";
            }
            obj.onmouseout = function(){
                obj.style.backgroundColor = "#fff";
            }
          }
        }
     var num = 2//上面多了一个大括号
     function add(){
         num ++;
         var tr1 = document.createElement("tr");
         var td1 = document.createElement("td");
         var td2 = document.createElement("td");
         var td3 = document.createElement("td");
         td1.innerHTML = "xh00"+num;
         td2.innerHTML = num;
         td3.innerHTML = "<a href=\"javascript:;\" onclick=\"del(this);\" >删除</a>";//这行改了一下
         var table = document.getElementById("table");//这里改了
         table.lastChild.appendChild(tr1);//这里改了
         tr1.appendChild(td1);
         tr1.appendChild(td2);
         tr1.appendChild(td3);
     }
     function del(obj){ //这里用了关键字改成del
         var tr = obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }
</script>
</head>
<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:;" onclick="del(this);" >删除</a></td>   
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="del(this);">删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="add()" />   
</body>
</html>

1