编程练习

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

要求：

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. manacher求最长回文子串算法模板

    #include <iostream> #include <cstring> #include <cstdlib> #include <stdio.h> ...

  2. 如何用redis做到限制，一个手机号，1分钟内最多发一条，一天内最多10条

    需要两个缓存 key名称 phone-busy,缓存1分钟 key名称 phone-send-count,缓存1天,每成功发送一条+1 发送的时候流程如下: 判断phone-busy是否存在,存在直接 ...

  3. RegistryView

    https://docs.microsoft.com/en-us/dotnet/api/microsoft.win32.registryview?view=netframework-4.7 On th ...

  4. maven实战（5）-- settings.xml的配置

    哈哈 查看maven的官方文档最权威:http://maven.apache.org/settings.html

  5. [Selenium] 如何在老版本的Chrome 浏览器上使用selenium

    由于Chrome Driver 只兼容Chrome  浏览器12.0.712.0 和之后的新版本,会因此如果要在老版本的Chrome  浏览器上使用Selenium, 则只能使用 SeleniumRC ...

  6. [Selenium] The commonly used validation method

    Assert.assertTrue(tmpEl.getAttribute("class").contains("selected"),"The fol ...

  7. Spring注解的（List&Map）特殊注入功能

    一.先看一个示例演示:spring注解的一个特殊的注入功能. 首先,是定义一个接口,3个实现类. public interface GreetService { public String sayHe ...

  8. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  9. docker安装-卸载

    docker官网正确安装-卸载 一.查看系统内核 uname -r 3.10.0-229.el7.x86_64 二.Install Docker 1.Install with yum sudo yum ...

  10. TFS 用户设置read权限后仍然无法查看代码的问题

    TFS 2013 在visual studio , team explorer , source control explorer 中点击 文件夹 右键菜单 Security 打开一个winform( ...