                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

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

慕工程9285452

2015-09-06

源自：JavaScript进阶篇 9-22

关注问题我要回答

766

操作

收起

2 回答

sixGod
2015-09-06

function changebg(obj){

obj.onmousemove=function(){

obj.style.backgroundColor="#ccc";

}

obj.onmouseout=function(){

obj.style.backgroundColor="#fff";

}

这个方法要写到外面去，你把这个方法写到onload的function中去了，外界是引用不到的，还有你的添加方法可能有问题，你把tr添加到tbody外去了

0 回复有任何疑惑可以回复我~

收起回答

慕工程9285452 提问者

把方法移到onload外面的确解决了问题，非常感谢！

2015-09-06 回复有任何疑惑可以回复我~

命运

多谢....

2015-09-12 回复有任何疑惑可以回复我~

薛淞之
2015-10-04

<!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 的时候也不行，真是着急死了！

0 回复有任何疑惑可以回复我~

收起回答

慕工程9285452 提问者

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

2015-10-05 回复有任何疑惑可以回复我~