DOM对象【JavaScript】
来源:互联网 发布:python signal ctrl c 编辑:程序博客网 时间:2024/05/16 09:32
编程练习
任务
第一步: 首先,我们创建删除函数,并在删除按钮上添加点击事件;
提示: 使用removeChild()。
第二步: 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
提示: 使用createElement()、innerHTML、appendChild()。
第三步: 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
代码:
<!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=docuement.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ bgcChange(tr[i]); } } function bgcChange(obj){ obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add(){ num++; var tr=document.createElement("tr"); var tn=document.createElement("td"); var tna=document.createElement("td"); var del=document.createElement("td"); tn.innerHTML="xh00"+num; tna.innerHTML="第"+num+"学生"; del.innerHTML="<a href="javascript:;" onclick="delete(this)" >删除</a>"; tr.appendChild(tn); tr.appendChild(tna); tr.appendChild(del); var ta=document.getElementById("table"); bgcChange(tr); ta.appendChild(tr); } // 创建删除函数 function del(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:;" 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
- JavaScript DOM对象结构图
- javascript,XML DOM,对象
- JavaScript文档对象(DOM)
- JavaScript HTML DOM 对象
- javascript的dom 对象
- javascript的dom 对象
- javascript之Dom对象
- javascript中的dom对象
- javascript DOM对象
- javascript的dom 对象
- javascript中的Dom对象
- JavaScript HTML DOM 对象
- javascript之DOM对象
- JavaScript DOM对象控制
- JavaScript对象dom
- JavaScript (2)dom对象
- JavaScript DOM对象
- javascript之DOM对象
- scala基础------>序列、集合、映射类型特点
- 数据结构-左式堆
- 心得
- 3nd 7月29日以及之后的半个月[围笑]
- hibernate中cascade和inverse的区别
- DOM对象【JavaScript】
- POJ3624--01背包
- IOS切图直接作为Android切图使用
- c++ base-面向对象特性
- 算法温习
- 复合索引和多个单列索引的效率比较
- 快速排序C++实现
- 框架(三)事务
- sqlmap常用语句