Javascript进阶篇第九章最后一个编程的练习，该要一个怎么的思路，有点乱-慕课网

首页课程实战体系课手记专栏慕课教程

Javascript进阶篇第九章最后一个编程的练习，该要一个怎么的思路，有点乱

来源：9-22 编程练习

wajf

2016-07-13 16:31

编程练习

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

要求：

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

3. 点击删除按钮，则删除当前行

写回答关注

2回答

mtexiy_Sss

2016-07-13 17:07:14

补思路：1.第一步，改变颜色，首先找到你所要改变颜色的行，table的所有子元素有文本元素，过滤掉后就可以得到所要改变的行元素，最后定义一个改变颜色的函数，给每一行加上鼠标移出移入的属性；
2.第二步，给table元素添加子元素，并赋予各种属性；
3.第三步，删除table元素子元素；
其中加上计数器num，表示子元素个数。

0 0

mtexiy_Sss: 2016-07-13 17:03:40

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript">
        num = 0;
        window.onload = function(){
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            var table = document.getElementById("table");
            var trs= table.childNodes[1].childNodes;
            for(var i =0;i<trs.length;i++){
                if(trs[i].nodeType == 1){
                    num +=1;
                    addmouse(trs[i]);
                }
            }
        }
        function addmouse(tr){
            tr.onmouseover=function(){this.style.background='#f2f2f2'};
            tr.onmouseout=function(){this.style.background='#fff'};
        }
        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        function add_line(){
            var table = document.getElementById("table");
            var newnode = document.createElement("tr");
            var newtd = document.createElement("td");
            newtd.innerHTML = "xh"+num;
            newnode.appendChild(newtd);
            var newtd = document.createElement("td");
            newtd.innerHTML = "name"+num;
            newnode.appendChild(newtd);
            var newtd = document.createElement("td");
            var newa=document.createElement("a");
            newa.href = "#";
            newa.onclick=function(){deltr(this);};
            newa.innerHTML = "删除"
            newtd.appendChild(newa);
            newnode.appendChild(newtd);
            addmouse(newnode);
            table.appendChild(newnode);
            num += 1;
        }
        function deltr(a){
            tr = a.parentNode.parentNode;
            //alert(tr.innerHTML);
            x = tr.parentNode.removeChild(tr);
            x=null;
            num -= 1;
        }



    </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="#" onclick="deltr(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="#" onclick="deltr(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

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

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

469070 学习 · 22582 问题

查看课程

相似问题

Javascript进阶篇第九章第四小节的第三个任务

回答 2

Javascript进阶篇6-11的编程练习

回答 2

javaScript进阶篇4-10编程练习

回答 4

javascript进阶篇 4-10 编程练习

回答 4

javascript进阶篇9-22编程练习

回答 1

打开慕课网App查看更多内容