继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

琥珀川振早见
关注TA
已关注
手记 1
粉丝 2
获赞 13

要求:

  1. 鼠标移到不同行上时背景色改为蓝色,移开鼠标时则恢复为原背景色 白色
  2. 点击添加按钮,能动态在最后添加一行
  3. 点击删除按钮,则删除当前行
<!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>
打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP