使用 DOM对象,控制HTML元素 来制作的一个简单的表格
制作一个表格,显示班级的学生信息。
要求:
1. 鼠标移到不同行上时背景色改为色值为 red,移开鼠标时则恢复为原背景色 white
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 btn = document.getElementById("a");
btn.onclick = function(){
var table = document.getElementsByTagName("table")[0];
add(table,"tr");
} //删除行
var a = document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick =function(){
var parentTwo = this.parentNode.parentNode;
var parentThree = parentTwo.parentNode;
remove(parentTwo,parentThree);
}
} //鼠标移动修改颜色
var tr = document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
tr[i].onmouseover = function(){
background(this,"red");
};
tr[i].onmouseout = function(){
background(this,"white");
}
} }; //改变颜色的函数
function background(obj,target){
obj.style.background = target;
} //删除的函数
function remove(two,three) {
three.removeChild(two); } //增加行中删除操作的函数
function remover(obj) {
var remove1=document.getElementById('table').childNodes[1];
var remove2=obj.parentNode.parentNode;
remove1.removeChild(remove2);
} //增加行的函数
function add(parent,child) {
var newone=document.createElement("tr");//新增行
newone.onmouseover = function(){
background(this,"red");
};
newone.onmouseout = function(){
background(this,"white");
};
var newone1=document.createElement("td");
newone1.innerHTML="<td />";
newone.appendChild(newone1);
var newone2=document.createElement("td");
newone2.innerHTML="<td />";
newone.appendChild(newone2);
var newone3=document.createElement("td");
newone3.innerHTML="<a href='javascript:;' onclick='remover(this)' >删除</a>";
newone.appendChild(newone3);
document.getElementById("table").childNodes[1].appendChild(newone);
} </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:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr> <tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr> </table>
<input id ="a" type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
使用 DOM对象,控制HTML元素 来制作的一个简单的表格的更多相关文章
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- javascript - DOM对象控制HTML元素详解
1.方法 getElementsByName() -- 获取name getElementByTagName() -- 获取 getAttribute() --获取元素属性 se ...
- web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解
1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- JS总结之二:DOM对象控制HTML
DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...
- 4.8.2.JSDOM对象控制HTML元素详解
1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- DOM对象控制HTML无素——详解3
创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...
随机推荐
- Kubernetes List-Watch
list-watch,作为k8s系统中统一的异步消息传递方式,对系统的性能.数据一致性起到关键性的作用. list-watch操作需要做这么几件事: 由组件向apiserver而不是etcd发起wat ...
- 计数排序(COUNTING-SORTING)
计数排序的思想: 计数排序是对每一个输入元素x;确定小于x的元素个数. 计数排序算法: 第一个for循环为统计arra 中的每一个数值的个数,并且放在相应arrc 数组中的arra[i]位,第二个fo ...
- Struts2的<s:date>标签使用详解[转]
作用:用来格式化显示日期的格式. 它可以用一种你指定的格式来显示 (如:“yyyy-MM-dd”),可以生成通俗易懂的注释(如:in 2 hours,14 minutes),或者用预先定义的一个格式来 ...
- Luogu-3878 [TJOI2010]分金币
这题和在我长郡考试时的一道题思路差不多...考虑折半搜索,预处理左半边选的方案所产生的数量差值\(x\)以及价值差值\(y\),把\(y\)扔到下标为\(x\)的set里面,然后在搜索右半边,每搜出一 ...
- web容器调用Filter和Servlet顺序学习
web容器调用Filter和Servlet顺序学习 一直对Filter和Servlet在哪里被web容器调用迷惑,后查看tomcat源码,揭开了其面纱.1. 下面是一个简单的时序图: 2. 对上 ...
- POJ 1015 Jury Compromise(dp坑)
提议:在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑选n个人作为陪审团的候选人,然后再从这n个人中选m人组成陪审团.选m人的办法是:控方和辩方会根据对候选 ...
- DB2导入导出方法总结
1.导出 DEL 文本文件 export to D:\T_TESTTABLE20121220.del of del select * from T_TESTTABLE 2.导出 ixf 文本文件.i ...
- php如何查看扩展是否开启
php如何查看扩展是否开启 一.总结 一句话总结:php -m 1.查看php已安装扩展命令 ? php -m 2.phpinfo();这是最常用的方法,但那么多扩展一时还真不太好找.? 3.exte ...
- CentOS 7.3 关闭默认防火墙&远程登录
小编作为一个运维新人,踩坑之路是必不可少的. 这不,新来了一家公司,做云运维工程师,新的环境,网络和之前的都不一样,VMware Workstation虚拟机上的网 ...
- 目标检测 — NMS
1.非极大值抑制步骤 非极大值抑制算法(Non-maximum suppression,NMS)在目标检测中经常用到.我们的检测算法可能对同一目标产生多次检测的结果,非极大值抑制算法可以保证每个目标只 ...