慕课网编程练习:制作一个表格,显示班级的学生信息。
来源:互联网 发布:java web 异常类型 编辑:程序博客网 时间:2024/06/06 09:36
制作一个表格,显示班级的学生信息。
要求:
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 trs=document.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){ bgcChange(trs[i]);} } function bgcChange(obj){ obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; function addtr(){ var mainTable=document.getElementById("table"); sid=prompt("请输入学号"); sname=prompt("请输入姓名"); var newtr=document.createElement("tr"); if(sid!=null && sid!="" && sname!=null && sname!=""){ newtr.innerHTML="<td>"+sid+"</td>"+"<td>"+sname+"</td>"+"<td><a href='#' onClick='del(this)'>删除</a></td>"; mainTable.appendChild(newtr); }else{ alert("请重新输入!"); } } // 创建删除函数 function del(obj){ var deltr=obj.parentNode.parentNode; deltr.parentNode.removeChild(deltr); } </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="#" onClick="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr><td>xh002</td><td>刘小芳</td><td><a href="#" onClick="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onClick="addtr()" /> <!--在添加按钮上添加点击事件 --> </body></html>
阅读全文
0 0
- 慕课网编程练习:制作一个表格,显示班级的学生信息。
- javascript编程小练习--制作一个表格,动态增加删除显示班级的学生信息。
- JS学习--制作一个表格,显示班级的学生信息
- 制作一个表格,显示班级的学生信息
- 制作一个表格,显示班级的学生信息——javascript
- javascript实现班级的学生信息显示
- 班级信息的学生类
- 在SQL server 中创建一个班级学生信息
- 学生信息表 -通过选择年级和班级得到详细的学生信息名单
- 用C++实现一个班级学生的学期成绩管理
- 记录一个班级的成绩练习一维数组
- 用来显示学生的信息
- c语言使用链表编写一个可以实现班级学生管理系统,增加,删除,修改学生信息
- 设计一个JFrame窗口,输入学生的基本信息,包括学号、姓名、学院、专业(下拉列表)、班级、籍贯(级联)、性别(单选按钮)、爱好(多选)、备注等,在界面中包括提交和重填按钮。提交后弹出窗口显示学生信息
- 创建一个学生类(Student),包括学号成绩,编程输入和显示学生的信息。建立一个人类(Person),包含姓名、性别和年龄,并作为学生类的基类
- 创建一个学生类(Student),包括学号和成绩,编程输入和显示学生的信息,建立一个人类(Person),包含姓名、性别和年龄,并作为学生类的基类
- 储存一个学生的信息
- 制作一个漂亮的表格
- 织梦DedeCMS简略标题
- AlphaGo的原理
- 在Ubuntu中设置samba共享可读写文件夹
- 小试4解析
- 拨开字符编码的迷雾--MySQL数据库字符编码
- 慕课网编程练习:制作一个表格,显示班级的学生信息。
- YJCocoa Gem开源库
- 软件测试学习6-动态白盒测试
- 电话程控交换机安装经验
- mysql基础1
- 谷歌二维码生成
- oracle ASM错误Initializing the Oracle ASMLib driver:[FAILED]
- tensorflow中的激活函数
- 文章标题