Js中Dom对象,控制Html元素
2016-04-12 22:42
489 查看
题目是这样的:制作一个表格,显示班级的学生信息。
要求:
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮,能动态在最后添加一行
3. 点击删除按钮,则删除当前行。
根据题目要求。编写代码如下:
一些注意的小知识点:
删除函数Del是使用obj.removeChild( )函数来实现的,removeChild( )这一类型的函数(包括appendChild( )、insertChild()、replaceChild( ))都是通过obj的父节点实现对obj节点的操作的,在上述代码中的Del( )函数想要实现的是删除整行,而我们首先取得的是节点a,根据层级关系a节点的上一级为td,td节点的父节点是tr,要删除tr则使用tr.parentNode获取tr的父节点,然后用removeChild( )函数删除整行;
在此梳理一下table标签的层级关系:table下的子节点是thead、tbody,tbody下子节点是tr,tr的子节点是th和td(th和td是平级的);
鼠标移动显示不同颜色可以通过onmouseover( )和onmouseout( )来实现,使用这两个函数的方法有:1在标签中直接使用例如:
Dom中getElementById()、gerElementByTagName( )、createElement( )的参数,比如tr等必须使用双引号
setAttribute( )函数的两个参数也必须使用双引号
但是removeChild( )、appendChild( )等函数的参数如tr等不需要使用双引号;
以上代码已经测试,验证可行
以上均为本人拙见,如有不足请在评论区指出。
要求:
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 tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { onChange(tr[i]); } // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 } function onChange(x) { x.onmouseover=function(){ x.style.backgroundColor="#f2f2f2"; } x.onmouseout=function(){ x.style.backgroundColor="#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add(){ num++; var tr=document.createElement("tr"); var x1=document.createElement("td"); var x2=document.createElement("td"); var x3=document.createElement("td"); x1.innerHTML="xh00"+num; x2.innerHTML="alex"+(num-2); x3.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>"; var tab=document.getElementById("table"); tab.appendChild(tr); tr.appendChild(x1); tr.appendChild(x2); tr.appendChild(x3); var tr = document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { onChange(tr[i]); } } // 创建删除函数 function Del(x) { var tr=x.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>
一些注意的小知识点:
删除函数Del是使用obj.removeChild( )函数来实现的,removeChild( )这一类型的函数(包括appendChild( )、insertChild()、replaceChild( ))都是通过obj的父节点实现对obj节点的操作的,在上述代码中的Del( )函数想要实现的是删除整行,而我们首先取得的是节点a,根据层级关系a节点的上一级为td,td节点的父节点是tr,要删除tr则使用tr.parentNode获取tr的父节点,然后用removeChild( )函数删除整行;
在此梳理一下table标签的层级关系:table下的子节点是thead、tbody,tbody下子节点是tr,tr的子节点是th和td(th和td是平级的);
鼠标移动显示不同颜色可以通过onmouseover( )和onmouseout( )来实现,使用这两个函数的方法有:1在标签中直接使用例如:
<div onmouseover="move(this)">(move()为一个函数);2 直接用标签名.onmouseover()=function(){…}的方法使用;
Dom中getElementById()、gerElementByTagName( )、createElement( )的参数,比如tr等必须使用双引号
setAttribute( )函数的两个参数也必须使用双引号
但是removeChild( )、appendChild( )等函数的参数如tr等不需要使用双引号;
以上代码已经测试,验证可行
以上均为本人拙见,如有不足请在评论区指出。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法