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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

截屏没有了_华为手机居然有6种截屏花招,很多人不知道,你会用哪几种?

华为手机越来越受国民的欢迎&#xff0c;而且华为手机的功能挺多挺实用的。就比如&#xff1a;支持画“一”进行分屏操作&#xff0c;可以让我们一边追剧一边聊天&#xff0c;真的特别方便。我使用华为手机也已经有三个年头了&#xff0c;在日常生活中看到一些有用的内容&#…

科技巨头纷纷从刷脸转向“刷手”,指纹如何扛起生物识别大旗?

来源&#xff1a;CSDN日前&#xff0c;IBM 高调宣布不再提供任何人脸识别服务和人脸分析软件及不再继续研发相关技术&#xff0c;正式退出市场。紧随其后&#xff0c;亚马逊也宣布&#xff0c;将暂停警方使用其人脸识别技术一年&#xff0c;转向扫描手掌特征来识别用户身份。人…

洛谷 P1767 家族_NOI导刊2010普及(10)

P1767 家族_NOI导刊2010普及&#xff08;10&#xff09; 题目描述 在一个与世隔绝的岛屿上&#xff0c;有一个有趣的现象&#xff1a;同一个家族的人家总是相邻的&#xff08;这里的相邻是指东南西北四个方向&#xff09;&#xff0c;不同的家族之间总会有河流或是山丘隔绝&…

matlab设置图片背景透明_[转载]Matlab中得到透明背景图片的方法

MATLAB输出的矢量图往往不是透明背景的&#xff0c;这样插在其他文件中就会很难看。关于在MATLAB中如何得到透明背景的矢量图&#xff0c;我有个经验就是&#xff1a;用MATLAB导出pdf图形(而不是eps图形)&#xff0c;然后用Acrobat另存成eps图形&#xff0c;往往就是透明的了。…

宜春万申智能装备携粉体自动化产线解决方案盛装亮相2024济南生物发酵展

宜春万申智能装备股份有限公司受邀盛装亮相2024第12届济南国际生物发酵展 展位号&#xff1a;1号馆A16-2展位 2024第12届国际生物发酵产品与技术装备展览会&#xff08;济南&#xff09;于3月5-7日在山东国际会展中心盛大召开&#xff0c;全方面展示&#xff1a;生物发酵、生…

浙大绘制首个地球微生物“社会关系”网络

来源&#xff1a;浙江大学图片由课题组提供单个微生物看不见、摸不着&#xff0c;但却无时不在、无处不在。但微生物的功能绝非“分解者”这么简单&#xff0c;影响到温室气体的、绿色生产的、人体健康的方方面面&#xff0c;其群落组成和功能具有极高的复杂性。如何更好认识微…

原型链相关

1.创建对象有几种方法 // 第一种var object1 { name:fang};var object2 new Object({name: fang});console.log(object1, object2);  //Object {name: "fang"} Object {name: "fang"}// 第二种var M function(name){this.name name};var object3 ne…

甘特图制作_如何用Excel快速制作甘特图?(超详细!)

甘特图作为现代项目管理中一项重要的管理工具&#xff0c;它能够帮助你考虑资源、成本等项目中重要的元素&#xff0c;并且能够通过图形直观的观察到项目中所要完成的任务、开始与结束时间&#xff0c;每项任务所需时间&#xff0c;某项任务在某个时间段内完成等都能直观的呈现…

后MATLAB时代的七种开源替代,一种堪称完美!

来源&#xff1a;中国指挥与控制学会近日&#xff0c;有哈工大学生表示收到了正版软件取消激活的通知&#xff0c;而在与 MATLAB 开发公司 MathWorks 交涉之后&#xff0c;被告知由于美国政府实体名单的原因&#xff0c;相关授权已被中止。目前&#xff0c;哈尔滨工业大学、哈尔…

训练深度学习_深度学习训练tricks整理1

深度学习训练tricks整理1环境&#xff1a;pytorch1.4.0 Ubuntu16.04参考&#xff1a;数据增强策略&#xff08;一&#xff09;​mp.weixin.qq.comhttps://zhuanlan.zhihu.com/p/104992391​zhuanlan.zhihu.com深度神经网络模型训练中的 tricks&#xff08;原理与代码汇总&…

三个可能会被计算机视觉技术改变的行业

计算机视觉最主要的应用是面部识别&#xff0c;这种技术经常被用于安全和执法领域。但是&#xff0c;本文意在介绍一些计算机视觉技术不太明显的用途。来源丨Forbes作者丨Bernard Marr编译丨科技行者计算机视觉技术&#xff08;也被称为机器视觉&#xff09;允许机器以视觉方式…

查看本机的ip地址

ifconfig可以查看本机的ip地址&#xff1a;inet addr:10.108.104.185 转载于:https://www.cnblogs.com/ymjyqsx/p/7520070.html

java stream 多个filter_如何在Java Stream上应用多个过滤器?

我必须通过一个映射过滤一个对象集合&#xff0c;该映射包含对象字段名称和字段值的键值对。我试图通过stream()。filter()应用所有过滤器。对象实际上是JSON&#xff0c;因此Map保留了其变量的名称以及它们必须包含的值才能被接受&#xff0c;但是出于简单性的原因&#xff0c…

没有数学何来计算机:论计算机起源的数学思想

来源&#xff1a;无数学 无计算机人类的历史可以看做一部关于解放的历史。也有这样的说法&#xff0c;懒惰是人类进步的动力。为了偷懒&#xff0c;人类不断的做着各种努力&#xff0c;发明了各种机器工具&#xff0c;将自己从繁重的劳动解放出来&#xff0c;另一方面&#xf…

python和python stub文件类型的区别_python – 如何告诉mypy包含stubfile

我正在玩mypy(版本&#xff1a;0.630),我很难让它看到我的存根文件.谁能告诉我这里有什么问题&#xff1a;我的目录结构如下所示&#xff1a;├── caesar.py└── stubs└── caesar.pyicaesar.py包含一些有效的python代码. caesar.pyi包含单词bugger.我希望当我运行mypy时…

复杂控件

1.自定义标题栏 1.1引入布局 步骤&#xff1a; 1&#xff09;写好布局 2&#xff09;在activity布局里面直接引用该布局 核心代码&#xff1a; 注意&#xff1a;如何将系统自带的标题栏去掉&#xff1a; 方法一&#xff1a;&#xff08;不一定灵&#xff09; 方法二&#xff1a…

​Arm芯片的新革命在缓缓上演

来源&#xff1a;内容由半导体行业观察&#xff08;ID&#xff1a;icbank&#xff09;编译自「seekingalpha」&#xff0c;谢谢。因为苹果将发布使用其自研Arm芯片的Mac电脑&#xff0c;为此我认为基于ARM的芯片将蚕食 Intel和AMD的核心业务。这其实已经发生了&#xff0c;但是…

web移动端开发经验总结

整理web移动端开发经验&#xff0c;部分内容借鉴于网上的博文。 1、meta标签 <meta name"viewport" content"widthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0;" /><!-- width可视宽度&#xff0c;initial-scale初始化缩放比…

追踪“MATLAB被禁”:我们如何做出卡别人脖子的软件?

作者 | 包云岗&#xff08;中国科学院计算技术研究所研究员&#xff09;编辑 | 宗华排版 | 华园导 读最近&#xff0c;哈工大、哈工程被禁用工科神器Matlab一事引发持续讨论。6月19日&#xff0c;中科院计算所研究员包云岗在微博上分享了他在“CCF YOCSEF杭州Matlab被禁之特别…

oracle 截取小数点_处理小数点位数的Oracle函数

Oracle函数可以实现许多的功能&#xff0c;下面为您介绍的Oracle函数用于处理小数点位数&#xff0c;如果您对Oracle函数数据库感兴趣的话&#xff0c;不妨一看。关于处理小数点位数的几个oracle函数()&#xff1a;1. 取四舍五入的几位小数select round(1.2345, 3) from dual;结…