编程练习

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

要求：

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. POJ3268 Silver Cow Party —— 最短路

    题目链接:http://poj.org/problem?id=3268 Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total ...

  2. Redis使用基本套路

    Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...

  3. HDU - 1054 Strategic Game（二分图最小点覆盖/树形dp）

    d.一颗树,选最少的点覆盖所有边 s. 1.可以转成二分图的最小点覆盖来做.不过转换后要把匹配数除以2,这个待细看. 2.也可以用树形dp c.匈牙利算法(邻接表,用vector实现): /* 用ST ...

  4. SPOJ：Free tour II （树分治+启发式合并）

    After the success of 2nd anniversary (take a look at problem FTOUR for more details), this 3rd year, ...

  5. 「LuoguP1122」 最大子树和

    Description 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是 ...

  6. [USACO2007 Demo] Cow Acrobats

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1629 [算法] 贪心 考虑两头相邻的牛 , 它们的高度值和力量值分别为ax , ay ...

  7. 【总结——HTTP协议】

    一.HTTP协议简介 什么是HTTP?全称是HyperText Transfer Protocal,即:超文本传输协议,从1990年开始就在WWW上广泛应用,是现今在WWW上应用最多的协议,目前版本是 ...

  8. .NETFramework：Cache

    ylbtech-.NETFramework:Cache 1.返回顶部 1. #region 程序集 System.Web, Version=4.0.0.0, Culture=neutral, Publ ...

  9. margin-----总结----解析逻辑

    margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...

  10. View Controller Programming Guide for iOS---(四)---Creating Custom Content View Controllers

    Creating Custom Content View Controllers 创建自定义内容视图控制器 Custom content view controllers are the heart ...