慕课网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入门篇课程笔记
1.js注释很重要单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
JavaScript进阶 - 第10章编程挑战
10-1 编程挑战现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图:
JavaScript进阶 - 第1章系好安全带,准备启航
第1章系好安全带,准备启航 1-1让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂 ...
4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
javascript进阶课程--第二章--对象
javascript进阶课程--第二章--对象学习要点理解面向对象的概念掌握对象的创建方法掌握继承的概念和实现方法基本概念对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...
javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战一.学习任务通过几个案例练习回顾学过的知识通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例温馨提示面向对象的知 ...
＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
javascript进阶课程--第一章--函数
javascript进阶课程--第一章--函数学习要点了解内存管理掌握全局函数的使用知识点基本类型和引用类型基本类型值有:undefined,NUll,Boolean,Number和Str ...
javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战一.学习任务通过几个案例练习回顾学过的知识通过练习积累JS的使用技巧二.实例练习1:删除确认提示框实例描述: 防止用户小心单击了“删除”按钮,在用 ...

随机推荐

linux io 学习笔记（01）---锁，信号量
1.采用信号量访问:当有段临界代码,需要保证排他的访问一个资源. 2.sudo dmesg -c 消除dmesg缓冲 3.互斥锁:代表的是一种锁资源,互斥锁的工作原理是:保证对共享资源操作的原子性 ...
ISE中FPGA的实现流程
一.ISE实现的步骤在综合之后,我们开始启动FPGA在ISE中的实现过程,整个过程包括以下几个步骤: 1.Translate ...
LeetCode：9. Palindromic Number（Medium）
原题链接:https://leetcode.com/problems/palindrome-number/description/ 1. 题目要求:判断一个int类型整数是否是回文,空间复杂度O(1) ...
php杂记——2（数组的使用）
1.建立升序数组:range(); $numarr1 = range(1,4); //(1,2,3,4) $numarr2 = range(1,10,2); //(1,3,5,7,9) $letter ...
Bootstrap开发漂亮的前端界面之实现原理
引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...
Qt的index 用方法static_cast<CTableItem*>(index.internalPointer())取出来的值的成员都未初始化
mediaData = 0x01046380 {m_Deviceid={...} m_Title={...} m_Type={...} ...} 里面是这样的值,内存已经释放,但是没有remove:
JS 客户端检测
能力检测能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力. 能力检测需要注意两点: 先检测达成目的的最常用的特性.因为先检测最常用的特性可以保证代码最优化,因为在多数情况下都可以避免测试多个 ...
mvc4 Forms验证存储两种登录代码
自己也不知道网上看到的第一种居多,第二种用到的人很少,第二种代码十分简洁,就是不清楚是否有安全隐患. 要采用Forms身份验证,先要在应用程序根目录中的Web.config中做相应的设置: <a ...
python 基础篇 10 函数进阶
本节主要内容:1. 函数参数--动态传参2. 名称空间, 局部名称空间, 全局名称空间, 作⽤域, 加载顺序.3. 函数的嵌套4. gloabal, nonlocal关键字⼀. 函数参数--动态传参 ...
核方法（Kernel Methods）
核方法(Kernel Methods) 支持向量机(SVM)是机器学习中一个常见的算法,通过最大间隔的思想去求解一个优化问题,得到一个分类超平面.对于非线性问题,则是通过引入核函数,对特征进行映射(通 ...

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

慕课网javascript 进阶篇 第九章 编程练习的更多相关文章

随机推荐

热门专题

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

慕课网javascript 进阶篇第九章编程练习的更多相关文章