javascript实现班级的学生信息显示

最新推荐文章于 2024-04-10 08:30:56 发布

我可不是小流氓

最新推荐文章于 2024-04-10 08:30:56 发布

阅读量2.7k

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/u014610047/article/details/50697446

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

制作一个表格，显示班级的学生信息.

要求：

鼠标移到不同行上时背景色改为色值#f2f2f2，移开鼠标时恢复为原背景色#fff
点击添加按钮，能动态在最后添加一行
点击删除按钮，则删除当前行
代码如下：

<!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++){
            bgcChange(tr[i]);
        }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

     }
     function bgcChange(obj){
         obj.onmouseover=function(){
            obj.style.backgroundColor="#f2f2f2"; 
         }
         obj.onmouseout=function(){
             obj.style.backgroundColor="#fff";
         }
     }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addrow(){
          var sNum=prompt('请输入学号','');
        var sName=prompt('请输入姓名','');
        if(sNum!=null&&sNum!=''&&sName!=null&&sName!=''){

            var newtr=document.createElement('tr');
            var newtrS=newtr.innerHTML='<td>'+sNum+'</td>'+'<td>'+sName+'</td>'+'<td><a href="javascript:;" onclick="del(this)">删除</a></td>';
            var oTC=document.getElementById("table").lastChild;
            oTC.appendChild(newtr);

        }else{alert('请重新输入');}
     }


     // 创建删除函数
     function removeinfo(obj){
         var tr = obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }


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

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

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