编辑练习--动态表格

最新推荐文章于 2024-07-06 16:47:02 发布

weixin_30388677

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/afrog/p/4183995.html

版权

编程练习

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

要求：

1. 鼠标移到不同行上时背景色改为色值为 #007aff，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

3. 点击删除按钮，则删除当前行

<!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(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     
        
     // 创建删除函数
     

  </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:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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

上面居然还有热心的提示：

提示:
1. 获取表格的行，getElementsByTagName 。
2. 使用for进行循环，为每行添加事件及背景颜色设置。

但是我不得不吐槽一下，这提示完全是一种误导。哎！这慕客讲师也是醉了。http://www.imooc.com/code/1636

如果用jquery来做的话，那是秒秒钟的事，但是这里，要求用原生的js来实现。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>  
  <script type="text/javascript"> 
  
      window.onload = function(){
                  
        var table = document.getElementById('table');
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

        table.onmouseover = function(e){

            var tr = e.target.parentNode;
 
            if(tr.tagName.toLowerCase()==='tr'){
                var trs = tr.parentNode.children;
                //先移除同类样式
                for(var i = trs.length-1;i>=0;i--){
                    if(trs[i].getAttribute('style')){
                        trs[i].style.backgroundColor = '#fff';
                    }
                }

                tr.style.backgroundColor = '#007aff';
            }
        }

        table.onmouseout = function(e){

            var tr = e.target.parentNode;
 
            if(tr.tagName.toLowerCase()==='tr'){
                tr.style.backgroundColor = '#fff';
            }
        }
 

         //按钮
         var btn = document.getElementsByTagName('input')[0];

         //添加操作
         btn.onclick = function(){
             createTr(table)
         }
         
         //删除操作
         table.onclick = function(e){
             var tag = e.target;
             if(tag.tagName.toLowerCase() === 'a'){
                 deleteTr(tag.parentNode.parentNode);
             }
         }
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      function createTr(table){
          var tr = document.createElement('tr');
          tr.innerHTML = '<td></td><td></td><td><a href="javascript:;" >删除</a></td>';
          table.appendChild(tr);
      }
            
        
     // 创建删除函数
       
     function deleteTr(tr){
         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:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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

演示效果

演示结果发现表格中的行不可以改内容，原来忘了加contentEditable="true"这个属性了。非常强大的属性，加上它，1秒变输入框了。

转载于:https://www.cnblogs.com/afrog/p/4183995.html

weixin_30388677

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编辑练习--动态表格

编程练习制作一个表格，显示班级的学生信息。要求：1. 鼠标移到不同行上时背景色改为色值为 #007aff，移开鼠标时则恢复为原背景色 #fff2. 点击添加按钮，能动态在最后添加一行3. 点击删除按钮，则删除当前行<!DOCTYPE html><html> <head> <title> new doc...
复制链接

扫一扫