                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

编程练习

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

要求：

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

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

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

wajf

2016-07-13

源自：JavaScript进阶篇 9-22

关注问题我要回答

1269

操作

收起

2 回答

mtexiy_Sss
2016-07-13

补思路：1.第一步，改变颜色，首先找到你所要改变颜色的行，table的所有子元素有文本元素，过滤掉后就可以得到所要改变的行元素，最后定义一个改变颜色的函数，给每一行加上鼠标移出移入的属性；

2.第二步，给table元素添加子元素，并赋予各种属性；

3.第三步，删除table元素子元素；

其中加上计数器num，表示子元素个数。

0 回复有任何疑惑可以回复我~

收起回答

mtexiy_Sss
2016-07-13

<!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>