javascript编程小练习--制作一个表格,动态增加删除显示班级的学生信息。
2017-11-08 21:03
666 查看
题目:制作一个表格,显示班级的学生信息。
要求:1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮,能动态在最后添加一行
3. 点击删除按钮,则删除当前行
效果:
提示:
第一步: 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
提示:
1. 获取表格的行,getElementsByTagName 。
2. 使用for进行循环,为每行添加事件及背景颜色设置。
3.编写一个设置颜色的函数。
第二步: 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
提示: 使用createElement()、innerHTML、appendChild()。
第三步:创建删除函数,并在删除按钮上添加点击事件;
提示: 使用removeChild()。
答案
代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </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);return false" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="del(this);return false" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onclick="addLine()" /> <!--在添加按钮上添加点击事件 --> <script> // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 function changebackcolor() { var arr_tr = document.getElementsByTagName("tr"); for(var i =0; i<arr_tr.length;i++){ chang_color(arr_tr[i]); } } function chang_color(obj){ obj.onmouseover = function(){ this.style.backgroundColor = "#f2f2f2"; } obj.onmouseout= function(){ this.style.backgroundColor = "#fff"; } } setInterval(changebackcolor,1000); //添加按钮 function addLine() { var sno = prompt("请输入学号:"); var sname = prompt("请输入姓名:"); if(sno.length!=0&&sname.length!=0){ var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML=sno; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML=sname; tr.appendChild(td2); var td3 = document.createElement("td"); var a = document.createElement("a"); a.setAttribute("onclick","del(this)"); a.innerHTML="删除"; a.href="javascript:;"; td3.innerHTML=""; td3.appendChild(a); tr.appendChild(td3); var table = document.getElementById("table"); table.appendChild(tr); }else{ alert("不能为空!"); } } //删除函数 function del(obj) { var del_tr = obj.parentNode.parentNode; del_tr.parentNode.removeChild(del_tr); } </script> </body> </html>
相关文章推荐
- 慕课网编程练习:制作一个表格,显示班级的学生信息。
- 制作一个表格,显示班级的学生信息,要求可以删除行和添加行
- 制作一个表格,显示班级的学生信息——javascript
- 制作一个表格,显示班级的学生信息。
- JS学习--制作一个表格,显示班级的学生信息
- 制作一个表格,显示班级的学生信息
- c语言使用链表编写一个可以实现班级学生管理系统,增加,删除,修改学生信息
- 一个网站的诞生- MagicDict未来予想図4 [表格的动态增加行和删除行,完整版]
- javascript动态增加、删除、填充表格内容
- 使用JavaScript操作DOM动态增加删除表格
- 使用Javascript动态增加,删除表格(使用DHTML对象模型)
- javascript动态增加、删除、填充表格内容
- javascript实现班级的学生信息显示
- 创建一个学生类(Student),包括学号成绩,编程输入和显示学生的信息。建立一个人类(Person),包含姓名、性别和年龄,并作为学生类的基类
- javascript实现动态增加删除表格行(兼容IE/FF)
- 设计一个JFrame窗口,输入学生的基本信息,包括学号、姓名、学院、专业(下拉列表)、班级、籍贯(级联)、性别(单选按钮)、爱好(多选)、备注等,在界面中包括提交和重填按钮。提交后弹出窗口显示学生信息
- 使用Javascript动态增加,删除表格
- 使用Javascript动态增加,删除表格(使用DHTML对象模型)
- 使用自定义列显示班级学生信息,要求能够进 行删除和修改,删除时给出提示:如 “ 确信要删 除 - 张三 - 吗? ” ,其中张三为当前行的姓名
- javascript实现动态增加删除表格行(兼容IE/FF)