为什么不能给新增行加背影色？-慕课网

为什么不能给新增行加背影色？

来源：9-22 编程练习

慕工程9285452

2015-09-06 11:38

<!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(i=0;i<tr.length;i++){
            changebg(tr[i]);
        }
        
        function changebg(obj){
            obj.onmousemove=function(){
            obj.style.backgroundColor="#ccc";
            }
            obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
            }
        }
     }
        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      var xhNum=2
      function add(){
          xhNum++;
          if(xhNum<10){
          xhNum="00"+xhNum;
          }else if(xhNum>=10||xhNum<=99){
          xhNum="0"+xhNum;
          }else { 
          xhNum=xhNum};
          
     var tab=document.getElementById("table");
           var ntr=document.createElement("tr");
 
          var xh=document.createElement("td");
          xh.innerHTML="xh"+xhNum;
      var xn=document.createElement("td");
          xn.innerHTML="姓名";
      var rm=document.createElement("td")
          rm.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
          tab.appendChild(ntr) ;
          ntr.appendChild(xh);
          ntr.appendChild(xn);
          ntr.appendChild(rm);  
          
      var ntr = document.getElementsByTagName("tr");
          for(var i= 0;i<ntr.length;i++)
          {
              changebg(ntr[i]);
          }//为什么不能给新增行加背影色？
      }            
        
     // 创建删除函数
      function del(obj){
      delRow=obj.parentNode.parentNode;
      delRow.parentNode.removeChild(delRow);
      }
     

  </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>

写回答关注

2回答

sixGod

2015-09-06 11:54:45

已采纳

function changebg(obj){
obj.onmousemove=function(){
obj.style.backgroundColor="#ccc";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}
这个方法要写到外面去，你把这个方法写到onload的function中去了，外界是引用不到的，还有你的添加方法可能有问题，你把tr添加到tbody外去了

2 0

命运

多谢....

2015-09-12 13:44:19

共 2 条回复 >

薛淞之: 2015-10-04 20:42:36

<!DOCTYPE html>
<html>
	<head>
		<title> new document </title>  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
		<script type="text/javascript"> 

			//起始背景色函数
			window.onload = function(){
				var trs = document.getElementsByTagName('tr');
				for (var i = 0; i < trs.length; i++){
					setOver(trs[i]);
					setOut(trs[i]);
				};
			}

			//背景色函数
			
			function setOver (obj) {
				obj.onmouseover = function(){
					this.style.backgroundColor = "##f2f2f2" 
				};
			}
			function setOut (obj) {
				obj.onmouseout  = function(){
					this.style.backgroundColor = "#fff" 
				};;
			}

			//删除函数
			function removeLine (obj) {
				var oG = obj.parentNode.parentNode.parentNode;
				var oP = obj.parentNode.parentNode;
				oG.removeChild(oP);
			}
			
			
			
			//添加函数
			function newLine () {
				var stuName = prompt("enter name","");
				var stuId   = prompt("enter number","");
				var objTr   = document.createElement('tr');

				objTr.innerHTML = 
				"<td>"+stuId+"</ td><td>"+stuName+"</ td><td><a href = 'javascript:;' onclick = 'removeLine(this)' >删除</ a></ td> ";

				setOver(objTr);
				setOut(objTr);

				document.getElementById('table').lastChild.appendChild(objTr);

			}
			
			 
		</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 = "removeLine(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
			</tr>

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

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

求指导，也是改变不了背景颜色，我这个不光无法给新行加颜色，windo.onload 的时候也不行，真是着急死了！

1 0

慕工程928...

只能说你太粗心了，this.style.backgroundColor = "##f2f2f2" 这个看出有什么问题了吗？多了个#

2015-10-05 13:08:17

共 1 条回复 >

JavaScript进阶篇

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

469070 学习 · 22582 问题

查看课程

相似问题

为什么新增一行后，鼠标滑过改变背景色不好使了？