慕课-js进阶篇小练习

最新推荐文章于 2021-11-05 11:05:15 发布

ccdida

最新推荐文章于 2021-11-05 11:05:15 发布

阅读量1.1k

点赞数 1

文章标签：函数

本文链接：https://blog.csdn.net/shmily__/article/details/78976966

版权

制作一个表格，显示班级的学生信息。任务：
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮，能动态在最后添加一行
3. 点击删除按钮，则删除当前行
为了完成这个小练习，感觉踩了无数坑。
问题：
1.window.onload,里面的函数调用时不能加括号。

<script type="text/javascript">
function hello(){
var a = document.getElementById("text");
a.innerHTML = "Hello";
}
window.onload = hello();//这种情况就会报错，因为JS是先执行后才加载下面的文档内容。把DIV放到JS代码块前就不会报错。
</script>
<div id="text"></div>

原因：因为window.onload = hello()这种赋值的语句的从右到左，也就是先执行了hello()，然后把hello函数执行结果（如果右边有return值的话）赋值给window.onload，跟你直接写hello()没什么区别。
所以严格来说window.onload要调用的函数是不能加括号的，避免错误。
window.onload是一个事件，它表示在页面加载完后执行它指向的代码，所以不需要给函数加括号去调用，页面加载完会自动去调用。
——转自慕课

2.for循环异步调用。
一、自己先写的非常简陋的版本

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
  <title> new document </title> 
  <style type="text/css">
      tr{
        height: 30px;
      }
  </style> 
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 

  window.onload = function(){
       // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var t1=document.getElementById('table').children[0].children;//找到tr 
        function over(){
            for(i=0;i<t1.length;i++){
                    (function(i){
                        t1[i].onmouseover=function(){
                           t1[i].style.backgroundColor="red";
                        }
                         t1[i].onmouseout=function(){
                             t1[i].style.backgroundColor="#ffffff";
                        }
                    })(i);
             } 
       }
       over();
       var btn=document.getElementById("btn");
       btn.onclick=add;//为什么加括号，加载页面直接执行了click

       function add(){

            var tr=document.createElement("tr");
            tr.innerHTML="<td></td>"
            document.getElementById("table").children[0].appendChild(tr);
            tr.firstChild.colSpan="3";
            over();
         }   
        var a=document.getElementsByTagName('a');
        remo(a);
        function remo(a){
              for(i=0;i<a.length;i++){
                a[i].onclick=function(){
                    this.parentNode.parentNode.parentNode.removeChild(a[0].parentNode.parentNode);//以后记得断句
                    over();
                }

            }

       }

     }
  </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="添加一行" id="btn" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

二，参考慕课大神后修改（瞬间觉得自己写得好烂，所以要多看别人的代码，才有进步！！！）：

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
  <title> new document </title> 
  <style type="text/css">
      tr{
        height: 30px;
      }
  </style> 
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 


      window.onload = function(){            
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
          var tr=document.getElementById('table').children[0].children;//找到tr 

            for(i=0;i<tr.length;i++){
               colorChange(tr[i]);
            }
    }

     function colorChange(obj){
            obj.onmouseover=function(){
              obj.style.backgroundColor="red";
            }
            obj.onmouseout=function(){
               obj.style.backgroundColor="#ffffff";
            }

     }


     var num1=2;

     function add(){
            num1++;
            var table=document.getElementById("table");
            var tr1=document.createElement("tr");
            tr1.innerHTML="<td>xh00"+num1+"</td>"+"<td>学生"+num1+"</td>"+"<td><a href='#' onclick='remove(this)'>删除</a></td>"
            table.children[0].appendChild(tr1);
           //必须重新调用，更新
            var tr=document.getElementById('table').children[0].children;//找到tr
            for(i=0;i<tr.length;i++){
               colorChange(tr[i]);
            }
         }   
          function remove(obj){ 
                             obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);   
            }
  </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="remove(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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