慕课网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 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊NettyConnector的start及shutdown

reactor-netty-0.7.6.RELEASE-sources.jar!/reactor/ipc/netty/NettyConnector.java

881
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3889
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32110
来自专栏落花落雨不落叶

canvas画简单电路图

63411
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6998
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2607
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5367
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070

扫码关注云+社区