慕课网javascript 进阶篇第九章编程练习

Posted 2020-08-21 随风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了慕课网javascript 进阶篇第九章编程练习相关的知识，希望对你有一定的参考价值。

把平常撸的码来博客上再撸一遍既可以加深理解，又可以理清思维。还是很纯很纯的小白，各位看官老爷们，不要嫌弃。最近都是晚睡，昨晚也不例外，两点多睡的。故，八点起来的人不是很舒服，脑袋有点晕呼呼，鉴于昨晚看到了这章的编程练习，想着自己DOM编程艺术也差不多看完了，高级3也看了点，所打算开始多敲代码了。
谁知，看着编辑器一脸懵逼，不知道如何啃下这块骨头，米思绪，写着也没什么感觉，索性就不写了，这不下午才来撸它。


   要求如下：

<!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(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         
        
     
     
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     
            
        
     // 创建删除函数
     


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

看好了要求就开始撸吧。先写个删除函数。

function del() {
           var trnode=document.getElementsByTagName("tr");//取得所有tr元素节点(注意：是个数组);

           for(var i=0;i<trnode.length;i++){  
               trnode[i].lastChild.onclick=function () { //用for循环对td的onclick事件进行绑定 注意绑定的td节点 
                                                          //而不是tr节点
            this.parentNode.parentNode.removeChild(this.parentNode);
               //这个地方地方得用关键字this，关于为什么用this 而不是变量 i 不懂的可以去看我上一篇的那个案例
                       }
                  }
               }

接下来添加tr标签：

function addone(){
    var sumtr=document.getElementsByTagName(‘tr‘);//得到所有tr元素节点的数组;
    var lasttr=sumtr[sum.length-1];//最后一个tr元素节点
    var newtr=document.createElement(‘tr‘);//创建一个新的tr元素节点
    var newtd1=document.createElement(‘td‘);//创建新的td标签
    var newtd2=document.createElement(‘td‘);//创建新的td标签
    var newtd3=document.createElement(‘td‘);//创建新的td标签
   lasttr.appendChild(newtr);//把新建的tr标签添加到文本中
   newtr.appendChild(newtd1);//把新建的td标签添加到文本中
   newtr.appendChild(newtd2);//把新建的td标签添加到文本中
   newtr.appendChild(newtd3);//把新建的td标签添加到文本中
   // 好了 到这你可以把函数添加到文正去试试效果 
  // 好像并不是我们要的效果 
 //给newtd1 newtd2 添加个input 标签试试 
// 给newtd3添加文本“删除”  还有a标签
  
   newtd1.innerHTML="<input type=‘text‘ />";
    ewtd2.innerHTML="<input type=‘text‘ />";    
   newtd3.innerHTML="<a href=‘javascript:;‘ onclick=‘del()‘>删除  </a>";
  
//最后的最后把这个函数绑定到 删除 所在的标签上,onclick
}

剩下的就是backgroundColor了，撸吧：

function changecolor(){

 var select=document.getElementsByTagName("tr");//得到所有的tr元素节点 

for(i=0;i<select.length;i++){ //for循环遍历数组 绑定事

select[i].onmouseover=function () {                   
   this.style.backgroundColor="#f2f2f2";
           }   // 用this的原理 一模一样  遍历的绑定事件中都用this
                  select[i].onmouseout=function () {
                      this.style.backgroundColor="#fff";//再绑定个鼠标out的事件
                  }
              }
          }
//最后的最后得考虑个问题  如果我把这个changecolor()函数放在windo.onload的那个匿名函数里，那我这个改变背景颜色的函数
只会执行一次，
那我后面创建出来的tr是不是就改变不了背景颜色了，答案是肯定改变不了的， 那我就得想办法了，这个得去好好想想，想到了就是自己的，
深刻点嘛。
因为创建tr的那个函数 只要创建一个tr就要运行一次 那我把这个改变backgroundColor()的函数在他里面调用不就可以了吗？    end。

整理如下：

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

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

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

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

<script type="text/javascript">

    window.onload = function(){
                          changecolor();

        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

    }
          function  changecolor(){
              var select=document.getElementsByTagName("tr");
              for(i=0;i<select.length;i++){

                  select[i].onmouseover=function () {
                      this.style.backgroundColor="#f2f2f2";
                  }
                  select[i].onmouseout=function () {
                      this.style.backgroundColor="#fff";
                  }
              }
          }
    // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

   function addOne(obj){
       var sumtr=document.getElementsByTagName("tr");
       var lasttr=sumtr[sumtr.length-1];
       var newtr=document.createElement("tr");
       var newtd1=document.createElement("td");
       newtd1.innerHTML="<input type=‘text‘ />";
       var newtd2=document.createElement("td");
       newtd2.innerHTML="<input type=‘text‘ />";
       var newtd3=document.createElement("td");
       newtd3.innerHTML="<a href=‘javascript:;‘ onclick=‘del()‘>删除</a>";
       newtr.appendChild(newtd1);
       newtr.appendChild(newtd2);
       newtr.appendChild(newtd3);
       lasttr.parentNode.appendChild(newtr);
       changecolor();
   }
   // 创建删除函数
       function del() {
           var trnode=document.getElementsByTagName("tr");
           for(var i=0;i<trnode.length;i++){
               trnode[i].lastChild.onclick=function () {                  this.parentNode.parentNode.removeChild(this.parentNode);
               }
           }
       }
</script>
</body>

以上是关于慕课网javascript 进阶篇第九章编程练习的主要内容，如果未能解决你的问题，请参考以下文章

慕课网javascript 进阶篇第十章编程练习

JavaScript进阶--慕课网学习笔记

慕课网_Java Socket应用---通信是这样练成的

JavaScript（转载自计科学院慕课网）

JavaScript入门--慕课网学习笔记

慕课网之javascript入门

慕课网javascript 进阶篇 第九章 编程练习

慕课网javascript 进阶篇第九章编程练习