好好学习2-慕课网

好好学习2

来源：9-22 编程练习

沐沐3381925

2020-12-03 03:52

<!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 trs=document.getElementsByTagName("tr");         
    var x=0;         
    for(const e of trs){         	
        if(x==0){         		
            x=1;         		
            continue;	//跳过第一行         	
        }         	
        e.onmouseover=function(){         		
            e.style.backgroundColor="#f2f2f2";         	
        }         
        e.onmouseout=function(){         		
            e.style.backgroundColor="#fff";         	
        }         	
        //e是每一个tr,e.childNodes是每一个td以及空白节点和注释节点         	
        for(const g of e.childNodes){         		
            if (g && g.nodeType==1){ //找每一个td节点           			 
                // alert(g.firstChild.nodeType);	//td           			 
                    if(g.firstChild && g.firstChild.nodeType==1){           			 	
                        g.firstChild.setAttribute('onclick','dele(this);return false');	//有效果           			 	
                        g.firstChild.href='javascript:void(0);';           			 
                        }       			 
             }         	
         }         
     }         
     document.getElementsByTagName("input")[0].setAttribute('onclick','add()');	
 }           
 // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；     
 function add(){     	
     var tb =document.getElementById("table");     	
     var tr =document.createElement("tr");     	
     var td1 =document.createElement("td");     	
     var num =tb.childNodes.length+1;     	
     var zeronum;     	
     if(num<10){     		
         zeronum="00";     	
         }else if(num>=10&&num<100){
              		zeronum="0";     	
           }else {     		
             zeronum="";     	
            }     	
     td1.innerHTML="xh"+zeronum+num;     	
     tr.appendChild(td1);     	
     var td2 =document.createElement("td");     	     	
     td2.innerHTML="";     	
     tr.appendChild(td2);     	
     var td3 =document.createElement("td");     	
     td3.innerHTML='<a href="javascript:void(0);" onclick="dele(this);return false;">删除</a>';     	
     tr.appendChild(td3);     	
     tb.appendChild(tr);     
 }     
 // 创建删除函数     
 function dele(obj){     	
 	 var tr = obj.parentNode.parentNode;     	
 	 var x=tr.parentNode.removeChild(tr);     	
 	 x=null;     
  }       
  </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:;" >删除</a></td>   
  <!--在删除按钮上添加点击事件  -->	   
  </tr>	   
  <tr>		
  <td>xh002</td>		
  <td>刘小芳</td>		
  <td><a href="javascript:;" >删除</a></td>   
  <!--在删除按钮上添加点击事件  -->	   
  </tr>  	   
  </table>	   
  <input type="button" value="添加一行"/>   
  <!--在添加按钮上添加点击事件  --> 
  </body>
  </html>

写回答关注

1回答

沐沐3381925: 2020-12-03 13:09:24

     function add(){     	
         var tb =document.getElementById("table");     	
         var tr =document.createElement("tr");     	
         var td1 =document.createElement("td");     	
         var num =tb.childNodes.length+1;     	
         var zeronum;     	
         if(num<10){     		
             zeronum="00";     	
             }else if(num>=10&&num<100){     		
                 zeronum="0";     	
                 }else {     		
                     zeronum="";     	
                     }     	
         td1.innerHTML="xh"+zeronum+num;     	
         tr.appendChild(td1);     	
         var td2 =document.createElement("td");     	     	
         td2.innerHTML="";     	
         tr.appendChild(td2);     	
         var td3 =document.createElement("td");     	
         td3.innerHTML='<a href="javascript:void(0);" onclick="dele(this);return false;">删除</a>';     	
         tr.appendChild(td3);     	
         tr.onmouseover=function(){         		
             tr.style.backgroundColor="#f2f2f2";         	
             }        
         tr.onmouseout=function(){         		
             tr.style.backgroundColor="#fff";         	
             }	     	
         tb.appendChild(tr);     
     }

0 0

JavaScript进阶篇

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

468195 学习 · 21891 问题

查看课程

相似问题

好好学习！

回答 1

好好学习！

回答 1

好好学习，天天向上

回答 3

怎么更好的学习

回答 2

仅供参考，有更好的一起学习

回答 1

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