js编程(增删学生信息)
2015-08-21 22:49
841 查看
编程练习
制作一个表格,显示班级的学生信息。要求:
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>
相关文章推荐
- BZOJ 1013: [JSOI2008]球形空间产生器sphere 高斯消元
- js的DOM(浏览器、网页尺寸)
- js的类型转换
- js的DOM(节点操作)
- js的DOM(节点属性)
- js的DOM(文档对象模型)获取节点
- js的screen对象
- 在JS方法中返回多个值的三种方法
- [持续更新]JavaScript学习笔记(六)
- js的Navigator对象
- js的Location对象
- js的History对象
- ajax同步与异步
- js的window对象(BOM)
- js内置对象(Array数组对象)
- jsp页面onsubmit="return checklogin();"该解决方案给
- js内置对象(Math对象)
- js内置对象(string字符串对象)
- js内置对象(日期对象)
- js内置对象(概念)