课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么没有效果呢？

来源：9-22 编程练习

土韵乡情

2018-06-26 16:45

<!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 a=getElementByTagName("tr");

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

             a[i].onmouseover()=function(){

                 a[i].style.color="red";

                 a[i].style.backgroundColor="#CCC";

             }

             a[i].onmouseout()=function(){

                 a[i].style.color="blue";

                 a[i].style.backgroundColor="#BBB";

             }

         }

}

 

     function add(){

         var dd=getElementById("table");

         var a=createElement("tr");

         dd.appendChild(a);

         var b1=createElement("td");

         b1.innerHTML="xh003";

         a.appendChild(b1);

         

         var b2=createElement("td");

         b2.innerHTML="zlj";

         a.appendChild(b2);

         

         var b3=createElement("td");

         a.appendChild(b3);

         var c=b3.appendChild("a");

         c.setAttribute("href","http://baidu.com");

         c.setAttribute("onclick","removeChild(this)");

         c.innerHTML="删除";

     }

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

     

    function removeChild(obj){

        var s=obj.parentNode.parentNode;

        s.parentNode.removeChild(s);

    }

     

 

     



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

   </tr>


   <tr>

<td>xh002</td>

<td>刘小芳</td>

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

   </tr>  


   </table>

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

 </body>

</html>


写回答 关注

2回答

  • qq_抛物线_0
    2018-07-04 13:32:40

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title> new document </title>

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

    <script type="text/javascript">

    window.onload = function () {

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

    var a = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

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

    a[i].onmouseover = function () {

    this.style.color = "red";

    this.style.backgroundColor = "#CCC";

    }

    a[i].onmouseout = function () {

    this.style.color = "blue";

    this.style.backgroundColor = "#BBB";

    }

    }

    }

    function add() {

    var dd = document.getElementById("table");

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

    dd.appendChild(a);

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

    b1.innerHTML = "xh003";

    a.appendChild(b1);

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

    b2.innerHTML = "zlj";

    a.appendChild(b2);

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

    a.appendChild(b3);

    var aLink =document.createElement("a");

    var c = b3.appendChild(aLink);

    c.setAttribute("href", "javascript:;");

    c.setAttribute("onclick", "removeChildAA(this)");

    c.innerHTML = "删除";

    }

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

    function removeChildAA(obj) {

    var s = obj.parentNode.parentNode;

    s.parentNode.removeChild(s);

    }

    </script>

    </head>

    <body>

    <table border="1" width="50%" id="table">

    <thead>

    <tr>


    <th>学号</th>

    <th>姓名</th>

    <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>xh001</td>

    <td>王小明</td>

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

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

    </tr>

    <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td>

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

    </td>

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

    </tr>

    </tbody>

    </table>

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

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

    </body>

    </html>


    0 0
  • qq_叶益鹏_0
    2018-06-27 16:34:15

     var a=document.getElementByTagName("tr");

    你少了document.下面也是

    0 0

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题

为什么没有效果呢

回答 3

为什么代码没有效果呢

回答 3

为什么没有颜色呢，css效果呢？

回答 2

为什么没有效果……

回答 2

为什么没有效果

回答 5

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