为了账号安全,请及时绑定邮箱和手机立即绑定

关于window.load的问题

<!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 mytr = document.getElementsByTagName("tr"); 

        for(var i=0;i < mytr.length;i++){

    mytr[i].onmouseover = function(){

            this.style.backgroundColor="#f2f2f2";   

    };

         mytr[i].onmouseout = function(){

            this.style.backgroundColor="#fff";   

         };

}

}

     

      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

     function addchild(){

        var table = document.getElementById('table');

        var tr = document.createElement('tr');

        

        var td1 = document.createElement('td');

        td1.innerHTML=prompt("请输入你的学号:");

        var td2 = document.createElement('td');

        td2.innerHTML=prompt("请输入你的姓名:");

        var td3 = document.createElement('td');

        td3.innerHTML='<a href="javascript:;" onclick="delete()">删除</a>';

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        table.appendChild(tr);

        

     }

   

     

     // 创建删除函数

     function delete(obj){

        var table = document.getElementById('table');

        var del = obj.parentNode.parentNode;

        table.removeChild(del);

     }



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

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="delete()">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

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

 </body>

</html>

请教各位,我的代码没有一点反应,鼠标滑过没有效果,点击添加和删除也没有效果,不知道是哪里出了问题?

正在回答

2 回答

你好,

你和我遇到同样的问题了,我的解决办法是这样的,把onload加载的后面的函数括号“}”不要放到最下面,放到最开始的颜色改变结束即可,或者使用调用函数引出下面的函数就行了,不会了,再问我。我已经研究明白了

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

孙先森 提问者

非常感谢!
2016-01-06 回复 有任何疑惑可以回复我~
<!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 mytr = document.getElementsByTagName("tr"); 
        for(var i=0;i < mytr.length;i++){
    mytr[i].onmouseover = function(){
            this.style.backgroundColor="#f2f2f2";   
    };
         mytr[i].onmouseout = function(){
            this.style.backgroundColor="#fff";   
         };
}
}
     
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     function addchild(){
        var table = document.getElementById('table');
        var tr = document.createElement('tr');
        
        var td1 = document.createElement('td');
        td1.innerHTML=prompt("请输入你的学号:");
        var td2 = document.createElement('td');
        td2.innerHTML=prompt("请输入你的姓名:");
        var td3 = document.createElement('td');
        td3.innerHTML='<a href="javascript:;" onclick="delete()">删除</a>';
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        table.appendChild(tr);
        
     }
   
   	 
     // 创建删除函数
     function delete(obj){
        var table = document.getElementById('table');
        var del = obj.parentNode.parentNode;
        table.removeChild(del);
     }


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

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

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


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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468278    人
  • 解答问题       21892    个

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

进入课程

关于window.load的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信