DOM编程练习（慕课网题目）

编程练习

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

要求：

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 () {var tr = document.getElementsByTagName("tr");for(var i=0;i<tr.length;i++){changebgc(tr[i]);}};// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色;function changebgc(obj) {obj.onmouseover = function () {obj.style.backgroundColor = "#f2f2f2";};obj.onmouseout = function () {obj.style.backgroundColor = "#fff";}}// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；var num = 2;function add() {num++;var newtr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var del = document.createElement("td");var newtext1 = document.createTextNode("xh00"+num);var newtext2 = document.createTextNode("学生"+num);del.innerHTML = "<a href=\"javascript:;\" οnclick=\"remove(this)\" >删除</a>";td1.appendChild(newtext1);td2.appendChild(newtext2);var table = document.getElementById("table");newtr.appendChild(td1);newtr.appendChild(td2);newtr.appendChild(del);table.appendChild(newtr);var tr = document.getElementsByTagName("tr");for(var i= 0;i<tr.length;i++) {changebgc(tr[i]);}}// 创建删除函数function remove(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:;" οnclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  --></tr><tr><td>xh002</td><td>刘小芳</td><td><a href="javascript:;" οnclick="remove(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  --></tr></table>
<input type="button" value="添加一行" οnclick="add()" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>

转载于:https://www.cnblogs.com/sunxirui00/p/7504468.html

DOM编程练习（慕课网题目）相关推荐

编程挑战JavaScript进阶篇（慕课网题目）
编程挑战现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三 ...
慕课网：Web前端面试题目及答案汇总
HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边 ...
基于 Python Django 的在线编程学习平台（仿慕课网）
仿照慕课网搭建的在线编程学习平台源码下载地址环境 Python 3.5 Django 1.10.5 xadmin 0.6 网站功能快速启动该项目安装 mysql 安装 python3 建立虚拟 ...
慕课网前端JS面试技巧笔记
前言关于面试前端水平的三个层次基层工程师-基础知识高级工程师-项目经验架构师- 解决方案几个面试题题目很多,做具有代表的题目,举一反三 js 中使用 typeof 能得到哪些类型 (== ...
JavaScript进阶篇(慕课网)
<h5>第1章系好安全带,准备启航 </h5> <b>1.1让你认识JS</b> 1.1.1 JavaScript能做什么? 增强页面动态效果(如:下 ...
慕课网_《Java微信公众号开发进阶》学习总结
时间:2017年08月12日星期六说明:本文部分内容均来自慕课网.@慕课网:http://www.imooc.com 教学源码:http://img.mukewang.com/down/... 学习 ...
JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
DOM编程以及domReady加载的几种方式
1,关于DOM编程 DOM编程主要是对dom树节点进行操作,所以你必须掌握基本的节点类型,如何去获取节点名字以及值(这些相关知识你可以去网上查,这里推荐一个慕课学习网站->http ...
慕课网饿了么 vue2.0 项目
饿了么 vue 项目总结项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师敲饿了么 vue 项目作者项目源代码地址项目完成之后 npm run build 这本来是写在 ...

DOM编程练习（慕课网题目）

编程练习

DOM编程练习（慕课网题目）相关推荐

最新文章

热门文章