js编程(增删学生信息)
来源:互联网 发布:网络问政平台的作用 编辑:程序博客网 时间:2024/05/21 22:49
编程练习
制作一个表格,显示班级的学生信息。
要求:
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++){ changeColor(tr[i]); } } function changeColor(obj){ obj.onmouseover = function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout = function(){ obj.style.backgroundColor="#fff"; } } var num=2 function add() { num++; var tab = document.getElementById("table"); var ntr = document.createElement("tr"); tab.appendChild(ntr); var ntd1 = document.createElement("td"); ntd1.innerHTML = "xh00"+num; ntr.appendChild(ntd1); var ntd2 = document.createElement("td"); ntd2.innerHTML ="第" +num+"个新来的"; ntr.appendChild(ntd2); var ntd3 = document.createElement("td"); ntd3.innerHTML = "<a href='javascript:;' onclick='del(this)'>删除</a>"; ntr.appendChild(ntd3); var tr = document.getElementsByTagName("tr"); for (var i = 0; i < trg.length; i++) { changeColor(tr[i]) } } // 创建删除函数 function del(obj) { var tr = obj.parentNode.parentNode; var table=tr.parentNode; table.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>
0 0
- js编程(增删学生信息)
- C语言 学生信息增删改查
- Struts2+JSP+JDBC实现学生信息的增删改查
- **//java之jdbc+DAO实现学生信息的增删改**
- 使用JDBC操作MySql进行增删改查学生信息。
- 学生信息(2)
- 用JS-appendChild实现学生信息录入
- 学生管理系统(增删改查)
- test7-2(学生信息)
- 学生信息统计(链表)
- (实验一)学生信息
- 学生信息
- 学生信息
- 学生信息
- 学生信息
- 学生信息
- 学生信息
- 学生信息
- Fragment讲解
- [LeetCode] Unique Paths II
- 冒泡排序及两种优化方式
- C语言中二维数组的动态申请与释放
- LA 4329 - Ping pong 树状数组
- js编程(增删学生信息)
- 统计简单学_假说检定
- 在JMeter测试计划中如何控制业务比例
- uva 10256 - The Great Divide(凸包)
- 今天开博客啦
- bash手册翻译#1 介绍
- js编程(选项卡)
- 作业,大美农登录界面和设置密码
- 【Linux系统】进程管理