javascript编程小练习--制作一个表格，动态增加删除显示班级的学生信息。

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

要求：
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮，能动态在最后添加一行
3. 点击删除按钮，则删除当前行
效果：
这里写图片描述
提示：
第一步：更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
   提示:
    1. 获取表格的行，getElementsByTagName 。
    2. 使用for进行循环，为每行添加事件及背景颜色设置。
    3.编写一个设置颜色的函数。
第二步：编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
   提示: 使用createElement()、innerHTML、appendChild()。
第三步：创建删除函数，并在删除按钮上添加点击事件；
  提示: 使用removeChild()。

答案

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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="del(this);return false" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
           </tr>

           <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;"  onclick="del(this);return false" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
           </tr>    
    </table>
    <input type="button" value="添加一行" onclick="addLine()" /> 
      <!--在添加按钮上添加点击事件  -->
    <script>
        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        function changebackcolor() {

            var arr_tr = document.getElementsByTagName("tr");
                for(var i =0; i<arr_tr.length;i++){
                    chang_color(arr_tr[i]);
                }
            }
        function chang_color(obj){
            obj.onmouseover = function(){
               this.style.backgroundColor = "#f2f2f2";
            }
            obj.onmouseout= function(){
                this.style.backgroundColor = "#fff";
            }
        }
        setInterval(changebackcolor,1000);

        //添加按钮
        function addLine() {
            var sno = prompt("请输入学号：");
            var sname = prompt("请输入姓名：");
            if(sno.length!=0&&sname.length!=0){
                var tr = document.createElement("tr");

                var td1 = document.createElement("td");
                td1.innerHTML=sno;
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML=sname;
                tr.appendChild(td2);

                var td3 = document.createElement("td");
                var a = document.createElement("a");
                a.setAttribute("onclick","del(this)");
                a.innerHTML="删除";
                a.href="javascript:;";
                td3.innerHTML="";
                td3.appendChild(a);
                tr.appendChild(td3);

                var table = document.getElementById("table");
                table.appendChild(tr);
            }else{
                alert("不能为空！");
            }
        }

            //删除函数
            function del(obj) {
                var del_tr = obj.parentNode.parentNode;
                del_tr.parentNode.removeChild(del_tr);
            }
    </script>
</body>
</html>

javascript编程小练习--制作一个表格，动态增加删除显示班级的学生信息。

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

答案

猜你喜欢