题目要求：

制作一个表格，显示班级的学生信息。

要求：

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

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>

先写删除 遇到了问题  我想用父元素table的方法removeChild来删除子元素tr  不过这是错误的

需要注意的是 有些节点是隐藏起来的 比如table中的tbody 即使不写它也是存在的

所以我原来写的函数 时用 table.children[0]想去访问到tr元素是不对的 这样访问到的是tbody元素 (注：我用的是children 而不是childNodes 用childNodes会把换行符 空格之类的都算上）

这是测试：

 <!DOCTYPE html>

 <html>

  <head>

      <title> new document </title>

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  </head>

  <body>

      <table id="table">

          <tr>

              <td>1</td>

              <td>2</td>

              <td>3</td>

          </tr>

          <tr>

              <td>4</td>

              <td>5</td>

              <td>6</td>

          </tr>

      </table>

       <script type="text/javascript">

           var table=document.getElementById("table");

           document.write(table.children[0].nodeName+"<br/>");

           document.write(table.children[0].children[0].nodeName);

       </script>

  </body>

 </html>

测试结果：

另外还测试了table.children[1] 这时候对我的代码来说是找不到这个元素的(如果有其他的tbody thead tfoot的话应该能找到)

那这就说明了当table内部只有tr时 默认会存在一个tbody

以后写table时候把 thead tbody tfoot 写清 就不会犯这种错误了

还发现了使用<a href="javascript:method()"></a>的错误  以后还是少用这种形式

具体来说 <a href="javascript:method()"></a> 在传递this等参数会出现问题 W3C不推荐在href中使用javascript语句(顺便说一句 HTML中this指的是接受此事件的元素 这里就是指<a>标签)

所以用<a href="javascript:;" onclick="method()"> </a> (加这个 href可能是为了让文本显示成可点击的样子 那写成 href="#" 也是可以的) (这个 href="#"意味着链接到当前界面  其实是无意义的 页面也不会刷新)

总的代码为：

 <!DOCTYPE html>

 <html>

  <head>

   <title> new document </title>

   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

   <script type="text/javascript">

     function remo(obj)

     {

         var tr=obj.parentNode.parentNode;

         tr.parentNode.removeChild(tr);

     }

     function addStu()

     {

         var table=document.getElementById("table");

         var tr=document.createElement("tr");

         var td1=document.createElement("td");

         var td2=document.createElement("td");

         var td3=document.createElement("td");

         td1.innerHTML="xh00"+(table.children[0].children.length);

         var a=document.createElement("a");

         a.setAttribute("href","javascript:;");

         a.setAttribute("onclick","remo(this)");

         a.innerHTML="删除";

         td3.appendChild(a);

         tr.appendChild(td1);

         tr.appendChild(td2);

         tr.appendChild(td3);

         tr.setAttribute("onmouseover","getColor(this)");

         tr.setAttribute("onmouseout","setColor(this)");

         table.children[0].appendChild(tr);

     }

     function getColor(obj)

     {

         obj.style.backgroundColor="#f2f2f2";    //改变颜色

     }

     function setColor(obj)

     {

         obj.style.backgroundColor="#fff";       //重新设置颜色

     }

   </script>

  </head>

  <body>

        <table border="1" width="50%" id="table">

        <tr>

         <th>学号</th>

         <th>姓名</th>

         <th>操作</th>

        </tr>

        <tr onmouseover="getColor(this)" onmouseout="setColor(this)">

         <td>xh001</td>

         <td>王小明</td>

         <td><a href="javascript:;" onclick="remo(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

        </tr>

        <tr onmouseover="getColor(this)" onmouseout="setColor(this)">

         <td>xh002</td>

         <td>刘小芳</td>

         <td><a href="javascript:;" onclick="remo(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

        </tr>

        </table>

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

  </body>

 </html>

虽然马马虎虎的看完了慕课网上的教程 但实际写起来就不尽人意了。还是要多写写

Html 慕课园编程练习9-22的更多相关文章

  1. Html 慕课园编程练习10-1

    23:10:25 2019-08-14 自己写的这个好丑.... 题目:利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: (另外 这个动图是怎么插入的 用url就行 复制就 ...

  2. 通过欧拉计划学习Rust编程（第22~25题）

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有 ...

  3. Java编程的逻辑 (22) - 代码的组织机制

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  4. Java编程思想(18~22)

    第18章 Java I/O系统 18.1 File 类 18.1.1 目录列表器 18.1.2 目录实用工具 18.1.3 目录的检查及创建18.2 输入和输出 在Java 1.0中类库的设计者限定于 ...

  5. 跟我一起学编程—《Scratch编程》第22课：颠弹力球

    1. 能够熟练绘制角色和背景造型 2. 能够熟练控制角色角度.速度等 3. 能够熟练使用变量 4. 能够熟练使用循环.选择等指令控制程序 任务描述: 1. 绘制弹力小球.托板角色,背景造型. 2. 游 ...

  6. Unix/Linux环境C编程新手教程(22) C/C++怎样获取程序的执行时间

    1.问:知道程序执行时间我们能够做什么? 在<C++应用程序性能优化>一书中,假设大家读过相信大家一定对性能优化这一块很上心,文中总是对优化前后的时间对照很直观给我们一个感受. 那么我们怎 ...

  7. Unix/Linux环境C编程入门教程(22) C/C++如何获取程序的运行时间

    1.问:知道程序运行时间我们可以做什么? 在<C++应用程序性能优化>一书中,如果大家读过相信大家一定对性能优化这一块非常上心,文中总是对优化前后的时间对比非常直观给我们一个感受. 那么我 ...

  8. 【PTA】浙江大学数据结构慕课 课后编程作业 03-树1 树的同构

    题目内容 给定两棵树T1和T2.如果T1可以通过若干次左右孩子互换就变成T2,则我们称两棵树是"同构"的.例如图1给出的两棵树就是同构的,因为我们把其中一棵树的结点A.B.G的左右 ...

  9. 22期老男孩Ptython全栈架构师视频教程

    老男孩Ptython全栈架构师视频教程 Python最新整理完整版22期视频教程 超60G课程容量<ignore_js_op> <ignore_js_op> <ignor ...

随机推荐

  1. 解决挖矿病毒【Xmrig miner 】CPU 100%服务器卡死问题

    背景: 突然有一天,服务器访问很慢很慢,进程查看发现CPU是100%,而且没有任何降低的意思 收集: 打开任务管理器,进程查看中CPU排序,发现一个System的进程,第一想法以为是空闲利用,发现结束 ...

  2. ggplot2（6） 标度、坐标轴和图例

    6.1 简介 标度控制着数据到图形属性的映射.标度将我们的数据转化为视觉上可以感知的东西:例如大小.颜色.位置和形状.标度也为我们提供了读图时所使用的工具:坐标轴和图例. 执行标度的过程分为三步:变换 ...

  3. ggplot2（8） 精雕细琢

    8.1 主题 主题系统控制着图形中的非数据元素外观,它不会影响几何对象和标度等数据元素.这题不能改变图形的感官性质,但它可以使图形变得更具美感,满足整体一致性的要求.主题的控制包括标题.坐标轴标签.图 ...

  4. 初识JVM：（一）JVM工作原理和流程

    本文主要参考:http://blog.csdn.net/CSDN_980979768/article/details/47281037?locationNum=7&fps=1 声明:主要用于个 ...

  5. .NET实现一个简单的IOC容器

    目录 1.主要细节 2.具体示例 参考及示例代码下载 shanzm-2020年3月17日 20:06:01 1.主要细节 使用反射程序集的方式获取对象的类型 通过反射的方式获取指定类型的的所有公共属性 ...

  6. python从数据库取数据后写入excel 使用pandas.ExcelWriter设置单元格格式

    用python从数据库中取到数据后,写入excel中做成自动报表,ExcelWrite默认的格式一般来说都比较丑,但workbook提供可以设置自定义格式,简单记录个demo,供初次使用者参考. 一. ...

  7. 判断 tableZen 是否有 横向滚动条

    判断 tableZen 是否有 横向滚动条 const outWidth = this.$refs.tableInnerZen.$el.clientWidth ].$el.clientWidth

  8. 学习Docker的记录

    一.下载Docker for Windows  与  安装教程 参考文档一步一步的来学习  文档1  文档2 二.Docker的常用命令介绍 docker run  -it  --rm   -p 80 ...

  9. Python3 + requests + unittest接口测试

    一.缘 起 笔者最近完成了基于Python3 + requests + unittest的接口测试脚本,故在此做一下记录,于己为复盘,于彼为学习和参考 二.思 路 接口测试无非三步: 首先,造数据 - ...

  10. 【Weiss】【第03章】练习3.12：单链表倒置

    [练习3.12] a.编写一个非递归过程以O(N)时间反转单链表. b.使用常数附加空间编写一个过程以O(N)时间反转单链表. Answer: 这题的b貌似没啥意义,在a小题里直接用头插法,不断地将头 ...