编程练习

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

要求：

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. django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务

    上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...

  2. XMLHttpRequest对象解读

    <!DOCTYPE html> <html> <body> <script> function reqListener () { console.log ...

  3. 关于rman duplicate 一些比較重要的知识点--系列三

    FYI: http://docs.oracle.com/cd/E11882_01/backup.112/e10643/rcmsynta020.htm#RCMRF126 rman duplicate d ...

  4. Office WORD如何去掉目录的背景灰色

    有人说鼠标点击空白的地方灰色就自动散掉了,但是我点击并没有散掉 鼠标选中有灰色背景的文字,点击格式-边框和底纹,点击无填充颜色,并应用于文字. O了

  5. 【LeetCode-面试算法经典-Java实现】【066-Plus One（加一）】

    [066-Plus One(加一)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a non-negative number represented as ...

  6. freemarker 模板

    1 整体结构 模板(FTL 编程)是由例如以下部分混合而成的: Text 文本:文本会照着原样来输出. Interpolation 插值:这部分的输出会被计算的值来替换.插值由${和}所分隔(或者#{ ...

  7. linux之rsync远程数据同步备份

    rsync服务是一种高效的远程数据备份的工具,该服务的port号为873, 是Liunx下的一种非独立服务.由xinetd超级服务管理,取代监听873port. 长处: 1.rsync能够利用ssh和 ...

  8. ul、li中的DIV垂直居中

    当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...

  9. Hackrank Equal DP

    Christy is interning at HackerRank. One day she has to distribute some chocolates to her colleagues. ...

  10. 关于wireshark

    1 对https进行抓包,或者说抓包经过了ssl加密的包 只要有rsa private key就可以了. https://wiki.wireshark.org/SSL 2 对浏览器访问的https的网 ...