编程练习

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

要求：

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++){

                changebgc(tr[i]);

            }

        };

        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色;

        function changebgc(obj) {

            obj.onmouseover = function () {

                obj.style.backgroundColor = "#f2f2f2";

            };

            obj.onmouseout = function () {

                obj.style.backgroundColor = "#fff";

            }

        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

        var num = 2;

        function add() {

            num++;

            var newtr = document.createElement("tr");

            var td1 = document.createElement("td");

            var td2 = document.createElement("td");

            var del = document.createElement("td");

            var newtext1 = document.createTextNode("xh00"+num);

            var newtext2 = document.createTextNode("学生"+num);

            del.innerHTML = "<a href=\"javascript:;\" onclick=\"remove(this)\" >删除</a>";

            td1.appendChild(newtext1);

            td2.appendChild(newtext2);

            var table = document.getElementById("table");

            newtr.appendChild(td1);

            newtr.appendChild(td2);

            newtr.appendChild(del);

            table.appendChild(newtr);

            var tr = document.getElementsByTagName("tr");

            for(var i= 0;i<tr.length;i++) {

                changebgc(tr[i]);

            }

        }

        // 创建删除函数

        function remove(obj) {

            var tr = obj.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="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

    </tr>

    <tr>

        <td>xh002</td>

        <td>刘小芳</td>

        <td><a href="javascript:;" onclick="remove(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

    </tr>

</table>

<input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->

</body>

</html>

DOM编程练习（慕课网题目）的更多相关文章

  1. 编程挑战JavaScript进阶篇（慕课网题目）

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  2. js之DOM入门（慕课网学习笔记）

    DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...

  3. checkbox：全选、全不选、单选（慕课网题目）

    任务 1.在第27行处补充完整,实现当点击"全选"按钮时,将选中所有的复选项. 提示:document.getElementsByTagName("input" ...

  4. JS内置对象练习（慕课网题目）

    效果图: XXXX年XX月X日 星期X--班级总分为:81 格式要求: 1.显示打印的日期. 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间. 2.计算出该班级的平均分(保留整数). 同学 ...

  5. 慕课网5-2编程练习：flex布局制作卡片布局案例

    慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...

  6. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

  7. 【JS学习】慕课网8-17编程练习 网页的返回与跳转

    编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...

  8. 慕课网javascript 进阶篇 第九章 编程练习

    把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...

  9. 慕课网3-13编程练习：采用flex弹性布局制作页面主导航

    小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...

随机推荐

  1. LoadRunner检查点使用小结

    LR中检查点有两种:图片和文字. 常用检查点函数如下: 1)web_find()函数用于从 HTML 页中搜索指定的文本字符串: 2)web_reg_find()函数注册一个请求,以在下一个操作函数( ...

  2. 自写程序调用mount

    代码: int fd = open("/dev/fuse", O_RDWR); printf("fd=%d\n",fd); int res; res=mount ...

  3. ASP.NET统计图表控件

    近来客户需要将前段时间开发的统计信息用图表展示出来,还要多个图表类型,例如:柱状图.饼图.曲线图.三维图等等.在网上google了一下,发现了三个(也许更多)可以使用的控件.下面我们一起看看这三个控件 ...

  4. BlueSea笔记<1>--Cricket初探

    最近在看Cricket这个实现了Actor模式的F#开源框架,对其工作方式作了一番探究.首先来看一段简单的例子代码: type Say = | Hello let greeter = actor { ...

  5. codeforces 669E E. Little Artem and Time Machine(节点为map型的线段树)

    题目链接: E. Little Artem and Time Machine time limit per test 2 seconds memory limit per test 256 megab ...

  6. P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team

    题目描述 After Farmer Don took up Frisbee, Farmer John wanted to join in the fun. He wants to form a Fri ...

  7. Java中gcRoot和引用类型

    看到一个老问题,Java是如何判定回收哪些对象的? 答:从gcRoot根搜索不可达,且标记清理一次之后仍没有被复活的对象,会被认定为垃圾对象进行清理.注意在Java中没有对象的作用域,只有对象的引用的 ...

  8. 分享几篇文章（PDF版）

    后天就要回老家了,除了团团年估计也没有其他好玩的,就琢磨下点经典文章带回去看看. Google一番找到了老赵很早以前的文章: http://www.cnblogs.com/JeffreyZhao/ar ...

  9. Exception in thread "main" org.hibernate.MappingException: Unknown entity: com.mao.PersonSet

    转自:https://blog.csdn.net/vipmao/article/details/51334743

  10. java try·····catch·····异常处理学习

    异常处理(又称为错误处理)功能 用于处理软件或信息系统中出现的异常状况(即超出程序正常执行流程的某些特殊条件). try....catch....只是异常处理的一种常用方法 try{ //可能导致异常 ...