javascript编程练习

new document

  window.onload = function()
  {
    var tr=document.getElementsByTagName("tr");
    for(i=0;i<tr.length;i++)
    {
     bgcChang(tr[i]);
    }
 }
 function bgcChange(obj) //鼠标划过效果与鼠标离开效果函数
 {
     obj.onmouseover=function()
     {
         obj.style.backgroundColor="#f2f2f2";
    }
         obj.onmouseout=function()
    {
             obj.style.backgroundColor="#fff"}
     }
 var num=2;      
 function add() //添加一行列表函数
 {
     num++;
     var tr=document.createElement("tr");
     var xd=document.createElement("td");
     var xdd=document.createElement("td");
     xd.innerHTML="XD00"+num;
     xdd.innerHTML="第"+num+"学生";
     var del=document.createElement("td");
     del.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";
     var xt=document.getElementById("table");
     xt.appendChild(tr);
     tr.appendChild(xd);
     tr.appendChild(xdd);
     tr.appendChild(del);
     var tr=document.getElementsByTagName("tr");
     for(i=0;i<tr.length;i++)
     {
         bgcChange(tr[i]);
     }

 }

 function del(obj) //删除当前行函数
 {
     var tr=obj.parentNode.parentNode;
     tr.parentNode.removeChild(tr)
  }

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

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

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

学号	姓名	操作

知识点：
1、οnmοuseοver=”函数” 鼠标划过效果，效果由函数决定
2、onmouseout =”函数” 鼠标划走的效果，效果也是由函数来决定
3、removeChild（指定标签） 删除标签下指定子标签
4、createElement(“标签名”) 创建一个元素 通常和appendNode一起使用
5、appendNode 默认是插入添加到最后一个子节点后