问答详情
源自：9-22 编程练习

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

<!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 11:38

个回答

  • 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外去了

    http://img.mukewang.com/55ebb8fe0001ce4e04680039.jpg

    0
  • 薛淞之
    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 的时候也不行，真是着急死了！

    0