编程练习

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

要求：

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. Exception: Could not bind to 0.0.0.0:8080 after trying for 30 seconds

    swift@vincent-virtual-machine /etc/swift $ sudo swift-init main restart Signal proxy-server pid: sig ...

  2. Linux 修改终端命令提示符颜色

    相信很多人已经看厌了Linux已成不变的命令提示符的颜色,多数人要么使用默认的绿色,要么在使用PUTTY的时候设置成绿色的,不知道是否有人想到提示符可以设置成其他的颜色呢,本文就说明命令提示符变量PS ...

  3. 从头认识Spring-3.1 简单的AOP日志实现-某方法之前的前后记录日志

    这一章节我们引入简单的AOP日志实现. 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03.topic_1_1; pub ...

  4. ES文件浏览器 WIFI 查看电脑文件怎么弄

    1 开启来宾账户   2 右击要共享的文件夹,添加Guest共享(如果只是要查看共享的资源,权限级别为读取即可)   3 共享之后,网络路径就是"\\"+你的计算机名+" ...

  5. poj 1258 Agri-Net(Prim)(基础)

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44487   Accepted: 18173 Descri ...

  6. 成员函数指针 C++ FAQ LITE — Frequently Asked Questions

    http://www.sunistudio.com/cppfaq/pointers-to-members.html C++ FAQ LITE — Frequently Asked Questions ...

  7. 自动填充输入框 Asp .Net Mvc

    1 效果 当在一个文本框中输入时,可以自动查找相关选项,然后加载出来以供参考   2 前台代码   <link href="~/Content/themes/base/jquery-u ...

  8. 解决pycharm下安装reportLab报错的问题

    在利用pycharm中自带的第三方安装工具安装reportLab时提示安装失败.失败的原因是缺失第三方扩展包.经过查阅查阅资料了解到一些python的第三方扩展包是需要python-dev支持的.我装 ...

  9. Memory Analysis环境安装

    安装MAT(MAT在eclipse的页面:http://www.eclipse.org/mat/downloads.php) 显示饼图的时候,需要安装BIRT Chart Engine插件,通过Ins ...

  10. java8--IO(java疯狂讲义3复习笔记)

    产生文件 File file = new File("abc.txt"); if(!file.exists()){ System.out.println(file.exists() ...