Js中Dom对象,控制Html元素
来源:互联网 发布:1050ti 知乎 编辑:程序博客网 时间:2024/04/28 23:17
题目是这样的:制作一个表格,显示班级的学生信息。
要求:
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等不需要使用双引号;
以上代码已经测试,验证可行
以上均为本人拙见,如有不足请在评论区指出。
0 0
- Js中Dom对象,控制Html元素
- JS DOM对象控制HTML元素
- DOM对象,控制HTML元素
- DOM对象,控制HTML元素
- DOM对象,控制HTML元素
- Js DOM对象控制HTML
- JavaScript的DOM对象,控制HTML元素
- JavaScript DOM对象控制HTML元素详解
- JavaScript的DOM对象控制HTML元素
- JavaScript DOM对象,控制html元素
- DOM对象,控制HTML元素 (2)
- js中控制Html元素
- js——Dom对象,控制html
- JS学习1--基础、DOM控制Html元素、JS事件
- HTML DOM 元素对象
- DOM 对象控制 HTML
- DOM对象控制HTML
- 学自慕课网:Dom对象控制Html元素(一)
- STM32系列第25篇--CAN总线
- IOS之TableViewCell重用
- NodeJS TroubleShooting--Alert Undefined!
- ThinkPHP3.2.3-文章管理系统-附带源码地址
- 模板
- Js中Dom对象,控制Html元素
- matlab中Signal Builder模块的用法总结
- Android中事件的分发机制
- 类和对象 三角形(2)
- 青春的记忆(原创纪实小说)
- 自定义瓷砖效果的GridView
- Django REST framework教程三: 基于类的视图
- ios 如何绘制一像素
- Android减少布局层次--有关Activity根视图DecorView的思考