为什么三个function都没有效果-慕课网

为什么三个function都没有效果

来源：9-22 编程练习

这个名字可以吗

2015-08-29 11:40

改变背景，添加一行和删除，这三个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>

写回答关注

1回答

非常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 1

这个名字可以...

非常感谢，后两个都成功了。第一个可能是浏览器设置的问题还是不行，尽管已经删了大括号。

2015-08-30 10:59:03

共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题

第三个没效果，为什么呀

回答 4

为什么第三个框没有结果

回答 1

为什么没有效果……

回答 2

为什么没有效果

回答 5

为什么没有效果

回答 4

打开慕课网App查看更多内容