分享一下，运行测试都符合要求了

源自：9-22 编程练习

分享一下，运行测试都符合要求了

<!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 h=document.getElementsByTagName("tr");
        for(var i=0;i<h.length;i++){
            bgChange(h[i]);
        }
      }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         function bgChange(obj){
             obj.onmouseover=function(){
                 obj.style.backgroundColor="#f2f2f2";
             }
             obj.onmouseout=function(){
                 obj.style.backgroundColor="#fff";
             }
         }


      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function creatRow(){
         var num=prompt("学号：");
         var name=prompt("姓名：");
         var table=document.getElementById("table");
         var tr=document.createElement("tr");
         var x=document.createElement("td");
         var y=document.createElement("td");
         var z=document.createElement("td");
         z.innerHTML='<a href="#" onclick="deleteRow(this)">删除</a>';
         x.innerHTML="xh00"+num;
         y.innerHTML=name;
         table.appendChild(tr);
         tr.appendChild(x);
         tr.appendChild(y);
         tr.appendChild(z);
         bgChange(tr);
     }


     // 创建删除函数
      function deleteRow(r){
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById('table').deleteRow(i);
     }

</script>
</head>
<body>
    <table border="1" width="50%" id="table">
    <tr>
  <th>学号</th>
  <th>姓名</th>
  <th>操作</th>
    </tr>

</table>
<input type="button" value="添加一行" onclick= "creatRow()" /> 
</body>
</html>

提问者：慕码人4304833 2018-07-25 21:21

个回答

慕粉1630332552

2018-08-01 16:42:27

另外删除要求使用removeChild()方法

0
慕粉1630332552

2018-08-01 16:41:34

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trs = document.getElementsByTagName("tr");
for (var i = 0; i<trs.length; i++) {
var tr = trs[i];
tr.onmouseover = function () {
tr.style.backgroundColor = "#f2f2f2";
}

tr.onmouseout = function () {
tr.style.backgroundColor = "#fff";
}
}

}
为什么这样就不能实现鼠标经过和移开事件呢？只是代码拿出来为什么就可以？

0