DOM编程练习（慕课网题目）

最新推荐文章于 2022-03-28 23:19:38 发布

weixin_30784141

最新推荐文章于 2022-03-28 23:19:38 发布

阅读量284

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunxirui00/p/7504468.html

版权

编程练习

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

要求：

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:;\" οnclick=\"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:;" οnclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" οnclick="remove(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

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

转载于:https://www.cnblogs.com/sunxirui00/p/7504468.html

weixin_30784141

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM编程练习（慕课网题目）

编程练习制作一个表格，显示班级的学生信息。要求：1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff2. 点击添加按钮，能动态在最后添加一行3. 点击删除按钮，则删除当前行我的解答<!DOCTYPE html><html><head> <title&g...
复制链接

扫一扫