慕课网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(){ 
整理如下:
<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GreenLeaves

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不...

2086
来自专栏开源项目

Vue 2.0 学习总结,精华全在这里了

摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide ...

27611
来自专栏HTML5学堂

2016.04第4周 群问题分享

HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一:...

34114
来自专栏finleyMa

补充上一篇 实现基于最新chrome的动态按需加载组件

上面代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别...

845
来自专栏青枫的专栏

JavaScript的介绍

 javascript是什么?     javascript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站...

492
来自专栏angularejs学习篇

angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,...

1011
来自专栏angularejs学习篇

angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,...

662
来自专栏python学习路

二、CSS

css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是...

2857
来自专栏AndroidTv

属性动画 ValueAnimator 运行原理全解析

好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行原理。

3618
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(五)元素的创建

732

扫码关注云+社区