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

相关文章

来自专栏我就是马云飞

View的绘制流程之MeasureSpec

目的 我在一个多月之前就说我准备开始梳理基础的事,好吧,我承认这一个月没我怎么梳理。或者梳理的不多,当我梳理到view的时候,发现需要分成绘制流程以及事件分发进...

1909
来自专栏小巫技术博客

A013-animator资源

753
来自专栏好好学习吧

js实现html表格<td>标签中带换行的文本显示出换行效果

如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下

5173
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

1492
来自专栏Golang语言社区

怎么设置 http 请求 并发 连接数 限制

问: 我需要不停的get一个url 但是 不管 我开启 20 个 还是 100个 goroutine 进行 http.Get 最终都是 每秒能请求10次左右 能...

4317
来自专栏iKcamp

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在...

3788
来自专栏九彩拼盘的叨叨叨

那些 CSS 的设计失误(译)

CSS Working Group 写的 Incomplete List of Mistakes in the Design of CSS 。译的不好,请见谅。

791
来自专栏偏前端工程师的驿站

javascript实例:逐条记录停顿的走马灯

效果: ? 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器的顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。 ...

2065
来自专栏HTML5学堂

如何修改alert样式

HTML5学堂:无论是PC还是移动端,系统自带alert样式总是让人感觉很丑陋,今天就教大家如何修改alert弹窗样式。 只能自定一个弹窗样式 首先必须明白的一...

3844
来自专栏练小习的专栏

封装图片滑动效果

by bopooo 在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个 技术方面在 动作缓冲上 遇到一些问题 不过都解决了 不过还...

22010

扫码关注云+社区