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

要求：

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. 2018.7.12训练赛 -G

    第二道水题 前边说了很多话,但就最后两段有用. 就是给你一个序列,然后你判断一下这个序列是不是递增的,是就输出yes,否则输出no. 所以以后不管题目看起来多长.多复杂,都要读一遍. 代码就不贴了.

  2. matplotlib模块之子图画法

    一般化的子图布局 首先要创建各个子图的坐标轴,传入一个四元列表参数:[x,y,width,height],用来表示这个子图坐标轴原点的x坐标.y坐标,以及宽和高.值得注意的是,这四个值的取值范围都是[ ...

  3. Qt发布程序

    一.作用 将Qt软件打包发布成绿色exe,在任意非Qt环境下运行 二.找到我们软件所依赖动态库 使用Qt的windeployqt.exe(在Qt安装目录的bin下面找)--! 1.新建文件夹,在里面放 ...

  4. Python 时间日历类型

    # 时间日历 # time模块 # 提供了处理时间和表示之间转换的功能 # 获取当前时间戳 # 概念 # 从0时区的1970年1月1日0时0分0秒, 到所给定日期时间的秒数 # 浮点数 # 获取方式 ...

  5. 使用eclipse搭建第一个python+Django的web开发实例

    python+Django的web开发实例   一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的 ...

  6. Variation calling and annotation

    Resequencing 302 wild and cultivated accessions identifies genes related to domestication and improv ...

  7. HDU 2480 Steal the Treasure （并查集+贪心）

    题意:给你n个点,m条边,包括有向边与无向边,每条边都有一个权值.在每个点上都有一个人,他可以走与这个点直接相连的所有边中任意一条边一次,并且得到这个权值,就不能走了,注意这条路也只能被一个人走.问最 ...

  8. MAC 系列 之XCode7.1 + HBuilder MUI 离线打包 ipa 上次application leader 问题：ERROR ITMS - 90534

    解决方法:这个原因 网上说法是 beta 测试版本:不过的确是beta版本(7.3 beta)打包的,所以我有下载了一个正式版本 7.1版本. 再次进行测试打包!

  9. scapy学习笔记（2）

    一.包 包(Packet)是TCP/IP协议通信传输中的数据单位,一般也称“数据包”.其主要由“目的IP地址”.“源IP地址”.“净载数据”等部分构成,包括包头和包体,包头是固定长度,包体的长度不定, ...

  10. Codeforces Round #371 (Div. 2) A ，B ， C 水，水，trie树

    A. Meeting of Old Friends time limit per test 1 second memory limit per test 256 megabytes input sta ...