编程练习

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

要求：

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. express 中文文档

    express() 创建一个express应用程序 var express = require('express'); var app = express(); app.get('/', functi ...

  2. 多态、抽象类、接口、区别(java基础知识九)

    1.多态的概述以及代码体现 * A:多态概述 * 事物存在的多种形态 * B:多态前提 * a:要有继承关系. * 一个类是父类,一个类是子类 * b:要有方法重写. * c:要有父类引用指向子类对象 ...

  3. 无限轮播器的bug修复

    前言:上一回实现了轮播器的自动滚动,但是有两个需要处理的bug. 1.增加需求:当用手拖拽控制轮播器的时候,停止自动滚动. 2.当同一个页面中有tableView,textView或scrollvie ...

  4. 「LuoguP1799」 数列_NOI导刊2010提高（06）

    题目描述 虽然msh长大了,但她还是很喜欢找点游戏自娱自乐.有一天,她在纸上写了一串数字:1,1,2,5,4.接着她擦掉了一个l,结果发现剩下1,2,4都在自己所在的位置上,即1在第1位,2在第2位, ...

  5. 【ZJOI 2008】树的统计

    [题目链接] 点击打开链接 [算法] 树链剖分模板题 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 3000 ...

  6. Ruby: Print WIN32OLE method names in Ruby

    class WIN32OLE   def list_ole_methods     method_names = ole_methods.collect {|m| m.name}     puts m ...

  7. explain之二：Explain 结果解读与实践，分析诊断工具之二

    MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提供任何调整建议,但它能够提供重要的信息 ...

  8. JS实现系统时间（自动）

    转自:https://blog.csdn.net/qq_35607510/article/details/54600563

  9. 使用AES128加密字符串

    import lombok.extern.slf4j.Slf4j; import org.apache.commons.codec.binary.Base64; import org.apache.c ...

  10. codeforces 724D

    注意到要字典序最小,从而变为水题. 从a选到z,每次必然是先看选部分当前字符x是否能满足覆盖,若不能则选上所有的字母x,不然break,输出答案. 进行26次dp即可. #include <cs ...