首页手记 js编程练习：制作一个表格，显示班级的学生信息。

js编程练习：制作一个表格，显示班级的学生信息。

标签：

Html/CSS JavaScript

要求：

鼠标移到不同行上时背景色改为蓝色，移开鼠标时则恢复为原背景色白色
点击添加按钮，能动态在最后添加一行
点击删除按钮，则删除当前行

<!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 rows = document.getElementsByTagName("tr");
         for(var i=0; i<rows.length; i++){
            makeChange(rows[i]);
         }
     }
     function makeChange(obj){
        obj.onmouseover = function(){
            changeColor(this);
        }
        obj.onmouseout = function(){
            clearColor(this);
        }
     }
     function changeColor(x){
         x.style.backgroundColor = "blue";
     }
     function clearColor(x){
         x.style.backgroundColor = "white";
     }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     var number = 3; 
     var a=1;
     function addRow(){
         var table = document.getElementById('table');
         var tr = document.createElement("tr");

             var td1 = document.createElement("td");
             var id = document.createTextNode("xh00" + number++);
             td1.appendChild(id);
             var td2 = document.createElement("td");
             var name = document.createTextNode("机器" + a++);
             td2.appendChild(name);
             var td3 = document.createElement("td");
             var func = document.createElement("a");
             func.innerText = "删除";
             func.href = "javascript:void(0)";
             func.onclick = function(){deleteRow(this)};
             td3.appendChild(func);

             tr.appendChild(td1);
             tr.appendChild(td2);
             tr.appendChild(td3);

         makeChange(tr);
         table.appendChild(tr);

     }

     // 创建删除函数
     function dele(obj){
         var t= obj.parentNode.parentNode.parentNode;
         t.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:void(0)" onclick="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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

点击查看更多内容