改变颜色的功能实现不了,求大神看看为什么

来源:9-22 编程练习

alive落叶

2016-02-29 20:47

<!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(var i=0;i<tr.length;i++){
           tr[i].setAttribute('onmouseover','javascript:this.style.backgroundColor="#f2f2f2" ');
           tr[i].setAttribute('onmouseout','javascript:this.style.backgroundColo="#fff" ');
       }
      }
       
     
     
     // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
    function addrow(){
        var num=prompt('请输入学号:');
        var name =prompt('请输入姓名:');
        var tr =document.createElement('tr');
        var tab=document.getElementById('table').lastChild;
        tr.innerHTML='<td>'+num+'</td>'+'<td>'+name+'</td>'+'<td><a href="javascript:;" onclick="deletetr(this)" >删除</a></td>';
        tab.appendChild(tr);
         
    }
           
     
    // 创建删除函数
    function deletetr(obj){
        var a=obj.parentNode.parentNode;
        a.parentNode.removeChild(a);
    }


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

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

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


写回答 关注

1回答

  • 什么都要起个昵称烦不烦
    2016-03-01 00:04:12
    已采纳

    tr[i].setAttribute('onmouseout','javascript:this.style.backgroundColo="#fff" ');  backgroundColo 少了个 r  

    alive落...

    javascrip: 指的是将后面的语句作为js段的代码来处理吗

    2016-03-01 15:29:19

    共 2 条回复 >

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题