为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

为什么鼠标只能移动到最后一行才能改变颜色，移动到其他行都没有变化？

<!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 (i=0;i<tr.length;i++) {

            var x=tr[i];

            x.onmouseover=function(){

                x.style.backgroundColor="#f2f2f2";

            }

            x.onmouseout=function(){

                x.style.backgroundColor="#fff";

            }

        }

}

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

    function add() {

        var td_1=document.createElement("td");

        var td_2=document.createElement("td");

        var td_3=document.createElement("td");

        td.innerHTML="";

        var tr=document.createElement("tr");

        tr.appendChild(td);

        var table=document.getElementsByTagName("table");

        table[0].appendChild(tr);

    } 

   

     

     // 创建删除函数

    function remo(obj) {

       var a=document.getElementsByTagName("a");

       obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);

    } 



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

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="remo(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

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

 </body>

</html>


八尺一寻

2017-09-05

源自：JavaScript进阶篇  9-22

关注问题 我要回答
727
操作
收起

正在回答

4 回答

qq_灰色头像_17
2017-09-23

 window.onload = function(){

var x;

        var tr=document.getElementsByTagName("tr");

        for (i=0;i<tr.length;i++) {

            var x=tr[i];

}

            x.onmouseover=function(){

                x.style.backgroundColor="#f2f2f2";

            }

            x.onmouseout=function(){

                x.style.backgroundColor="#fff";

            }

}

试试这样行不，不行就只能把变色事件写到另一个函数里面再引用了

0 回复 有任何疑惑可以回复我~
收起回答
破旧的时光机3662066
2017-09-11

 var tr=document.getElementsByTagName("tr");

        for (i=0;i<tr.length;i++) {

          var x=tr[i];

           x.onmouseover=function(){

                this.style.backgroundColor="#f2f2f2";

            }

            x.onmouseout=function(){

                this.style.backgroundColor="#fff";

            }

        }

改成这样就对了，window.onload执行后进入循环，但是在你点上去的时候i的循环已经走完了x=tr[2] 这样就只能最后一个可以执行，你手动把i的大小改为i<2 就发现只有第二个可以换颜色。改成this之后就会指向前一个设置的对象



0 回复 有任何疑惑可以回复我~
收起回答
Rooney83551379
2017-09-06

你好，我按照你的思路，完善了下你的代码，请作为参考。

<!DOCTYPE html>

<html>

<head>

    <title>new document </title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript">

        window.onload = function () {

            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

            var tr = document.getElementsByTagName("tr");

            for (i = 1; i < tr.length; i++) {//   个人觉得， 首行标题不需要有选中状态，故从1开始，当然从0也行- -

                var x = tr[i];

                mouseInOut(x);

            }

        }


        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

        function add() {

            var td_1 = document.createElement("td");

            var td_2 = document.createElement("td");

            var td_3 = document.createElement("td");

            td_1.innerHTML = "";

            td_2.innerHTML = "";

            td_3.innerHTML = '<a href="javascript:;" onclick="remo(this)">删除</a>';

            var tr = document.createElement("tr");

            //下面是补充部分：

            tr.appendChild(td_1);

            tr.appendChild(td_2);

            tr.appendChild(td_3);

            mouseInOut(tr);

            var table = document.getElementsByTagName("table");

            table[0].appendChild(tr);


        }

        //公开一onmouseover、onmouseout的方法

        function mouseInOut(x) {

            x.onmouseover = function () {

                x.style.backgroundColor = "#f2f2f2";

            }

            x.onmouseout = function () {

                x.style.backgroundColor = "#fff";

            }

        }


        // 创建删除函数

        function remo(obj) {

            var a = document.getElementsByTagName("a");

            obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);

        } 



    </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="remo(this)">删除</a>

            </td>

            <!--在删除按钮上添加点击事件  -->

        </tr>

        <tr>

            <td>

                xh002

            </td>

            <td>

                刘小芳

            </td>

            <td>

                <a href="javascript:;" onclick="remo(this)">删除</a>

            </td>

            <!--在删除按钮上添加点击事件  -->

        </tr>

    </table>

    <input type="button" value="添加一行" onclick="add()" />

    <!--在添加按钮上添加点击事件  -->

</body>

</html>


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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468043    人
  • 解答问题       21891    个

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

进入课程

本课相似问答

2 回答为什么鼠标移动颜色没变化？

1 回答这样写为什么鼠标移动到一行上颜色不改变？

1 回答鼠标移动到行上背景颜色没有变化，求大神解答

1 回答为什么行不随着鼠标的移动而改变背景颜色

1 回答鼠标移到不同行时背景色改变？
搜索更多本课相关问答

为什么鼠标只能移动到最后一行才能改变颜色，移动到其他行都没有变化？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信