制作一个表格，显示班级的学生信息。

要求：

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元素 来制作的一个简单的表格的更多相关文章

  1. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  3. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  4. web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

  5. JS总结之二：DOM对象控制HTML

    DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...

  6. 4.8.2.JSDOM对象控制HTML元素详解

    1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title ...

  7. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  8. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  9. DOM对象控制HTML无素——详解3

    创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...

随机推荐

  1. GIT截图

    GIT截图 今天首次成功用了GIT上传了JAVA代码,感觉一下次就能上传这么多代码,确实比在网页上方便.自己一开始根本摸不着头脑,不知道怎样使用GIT软件,但在学姐博客的指导下,在同学热情且耐心地指导 ...

  2. Bootstrap3组件--1

     目录 1. Glyphicons字体图标 2.下拉菜单 3.按钮组 4. 输入框组 5.导航 6. 导航条 7. 路径导航 1. Glyphicons字体图标 出于性能的考虑,所有图标都需要一个基类 ...

  3. Python面向对象编程高级特性

    ***这里还是根据网上资料,主要是廖雪峰老师的教程学习的笔记,主要介绍python面向对象的高级特性,笔记不全,只是记录自己觉得容易出错的地方*** 1.python作为一种动态语言,他的动态绑定机制 ...

  4. jstl标签 c:if和c:choose

    <c:if test="${test == null}">test为null</c:if> 其意思是,如果test 为 null,那么就打印 “test为n ...

  5. MySQL锁机制和PHP锁机制

    模拟准备--如何模拟高并发访问一个脚本:apache安装文件的bin/ab.exe可以模拟并发量 -c 模拟多少并发量 -n 一共请求多少次 http://请求的脚本例如:cmd: apache安装路 ...

  6. 【P2401】不等数列（DP）

    这个题乍一看就应该是DP,再看一眼数据范围,1000..那就应该是了.然后就向DP的方向想,经过对小数据的计算可以得出,如果我们用f[i][j]来表示前i个数有j个是填了"<" ...

  7. 用简单的反射优化代码（动态web项目）

    在动态web项目中,没有使用框架时,只是简单的jsp访问servlet实现增删改查, 无论是哪个方法都需要经过Servlet中的doGet()方法或doPost()方法,我们可以在链接中附带参数进行区 ...

  8. js运算符、关键字、保留字、转义字符

  9. springboot项目支持war部署tomcat

    最近在学校spring boot 在网络上学校到简单的启动spring boot项目,也搭建好了,但时实际情况我的spring boot项目是要发布到tomcat中的,今天,随意打了个war包发布到t ...

  10. 闲聊SEO

    SEO 1. SEO 搜索引擎优化 免费(Baidu,Google) SEM 搜索引擎营销 收费 2. IP 独立IP访问的用户 PV 页面的点击量 UV 独立访客数 3. 搜索引擎蜘蛛 权重 去让搜 ...