编程练习

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

要求：

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. 高清（200万像素）多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA

    DH-IPC-HFW5200-IRA-0722A http://download.dahuatech.com/instruction_download.php?classOne=3907&cl ...

  2. hdu 4599 Dice

    数学能力已经彻底降低到了小学水平,真是惨啊惨... 首先G(M)很容易确定,G(M) = 6 * M; H(N) = 6 * F(N),于是推出来H(N)就可以了,昨天请教了一下别人,直接数学公式搞定 ...

  3. 7.1 itertools--高效循环的创建函数

    7. 函数式编程库 本库主要提供了支持函数式编程的函数和类,以及提供通用调用对象. 7.1 itertools--高效循环的创建函数 本模块主要提供了迭代器方面的操作函数,跟语言API.Haskell ...

  4. kill mediaserver脚本

    #!/bin/bash adb shell kill $(adb shell ps | grep mediaserver | awk '{print $2}') adb shell pm clear ...

  5. 关于disable和readonly

    我们在做网页时,难免的会因为权限或者各种原因,想让使用者看到,但是却不想让用户去对值进行更改,我们有两个选择 一.我们使用disabled将文本框禁用掉. 二.我们使用readonly使得文本框只能读 ...

  6. js实现的美女瀑布流效果代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. android 自己主动拒接后再取消自己主动拒接,该联系人来电界面无图标显示,且点击挂断无反应

    1.    设置一个联系人为自己主动拒接 2.    该联系人来电 3.    取消该联系人的自己主动拒接 4.    该联系人来电 Error: 来电界面无头像显示,直接显示黑屏,且点击拒接butt ...

  8. 自己动手写最简单的Android驱动---LED驱动的编写【转】

    本文转载自:http://blog.csdn.net/k_linux_man/article/details/7023824 转载注明出处,作者:K_Linux_Man, 薛凯 山东中医药大学,给文章 ...

  9. bzoj1560: [JSOI2009]火星藏宝图

    考虑到一个性质,A到B的距离一定不小于A到C再到B的距离,因为能够到达这三个点不可能构成锐角三角形 对于当前点的更新只需要找那些无法经过其它点再到当前点的点,相当于是一个y坐标单调减的上凸包,随便维护 ...

  10. android编程取消标题栏方法（appcompat_v7、Theme.NoTitleBar）

    方式一:编码方式 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstance ...