编程练习

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

要求：

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

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

3. 点击删除按钮，则删除当前行

任务

第一步： 首先，我们创建删除函数，并在删除按钮上添加点击事件；

提示: 使用removeChild()。

第二步： 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

提示: 使用createElement()、innerHTML、appendChild()。

第三步： 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

提示:

1. 获取表格的行，getElementsByTagName 。

2. 使用for进行循环，为每行添加事件及背景颜色设置。
=============================================================代码如下====================================

<!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(){
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
colorChange(tr[i]);
}
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
function colorChange(obj){
obj.onmouseover=function(){
obj.style.backgroundColor="#f2f2f2";
}

obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
var num=2;
function add(){
num++;
var tr=document.createElement("tr");
var xuehao=document.createElement("td");
var xingming=document.createElement("td");
var deleteBtn=document.createElement("td");

xuehao.innerHTML="xh00"+num;
xingming.innerHTML="学生"+num;
deleteBtn.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";

var tab=document.getElementById("table");
tab.appendChild(tr);
tr.appendChild(xuehao);
tr.appendChild(xingming);
tr.appendChild(deleteBtn);

var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
colorChange(tr[i]);
}
}

// 创建删除函数
function del(obj){
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

</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:;" onclick="del(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>

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

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

==========================界面展示==================

javascript---DOM大编程的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  3. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  4. Javascript DOM编程艺术

    Chapter 0 为什么读这本书?作为js入门书,补基础,由于本书代码demo较简单,并没有贴代码,只记录一些自己要注意的知识点以及代码脚本 Chapter 1: javascript简史 DOM全 ...

  5. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  6. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  7. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  8. Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载

    高级进阶必读 你所不知道的系列,高级开发必掌握. JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理 ...

  9. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  10. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

随机推荐

  1. zerorpc使用时报错：No handlers could be found for logger "zerorpc.channel"

    问题如题:安装方法参考 http://www.cnblogs.com/shengulong/p/7887586.html ,安装完后,使用时出现如题的错误 解决办法: 1.zerorpc本身依赖很多三 ...

  2. A Single Channel with Multiple Consumers RabbitMQ

    http://stackoverflow.com/questions/30696351/a-single-channel-with-multiple-consumers-rabbitmq up vot ...

  3. MongoDB中对象反序列化的一个小问题

    今天在mongoDB存取对象数据的时候,碰到一个小问题:对象的某一个字段类型是抽象类或者接口.在存入的时候没有问题.可是在读取的时候,因为没有详细类的信息,无法完毕对象的又一次构建.就会报错: Can ...

  4. 关于Scrum

    最近某些产品经理发出下两周的工作计划的时候,喜欢带上sprint这个字眼,看上去貌似是要走敏捷开发这一套,只可惜,我觉得他表现出来的是对敏捷开发和Scrum一窍不通,甚至对软件开发流程都完全不清楚,居 ...

  5. POJ训练计划2299_Ultra-QuickSort(线段树/单点更新)

    解题报告 题意: 求逆序数. 思路: 线段树离散化处理. #include <algorithm> #include <iostream> #include <cstri ...

  6. 谈谈TensorFlow with CPU support or TensorFlow with GPU support（图文详解）

    不多说,直接上干货! You must choose one of the following types of TensorFlow to install: TensorFlow with CPU ...

  7. Axure使用笔记

    软件设置类 两个矩形的双边框,边框重合: 项目---项目设置---边界对齐---内边界对齐. 自动备份时间设置 文件-自动备份设置-默认15分钟,根据电脑硬件可以调整. Axure 8 可以不用安装 ...

  8. 猫猫学iOS 之第一次打开Xcode_git配置，git简单学习

    猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:错误 当第一次打开Xcode我们进行commit操作的时候会 ...

  9. 2016/3/27 分页 共X条数据 本页x条 本页从x-y条 x/y页 首页 上一页 123456 下一页 末页 pagego echo $page->fpage(7,6,5,4,3,2,1,0);

    显示效果: fpage.class.php <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; / ...

  10. <input type=XXXXX>

    选框,提交/重置按钮等,下面一一介绍. 1,type=text  输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等.当然这也是Input ...