DOM对象编程练习小结

最新推荐文章于 2021-12-21 11:26:07 发布

Kongkong_nana

最新推荐文章于 2021-12-21 11:26:07 发布

阅读量430

点赞数

分类专栏： web开发文章标签： DOM javascript 添加表格一行删除表格一行

本文链接：https://blog.csdn.net/NA_SAMA/article/details/50939062

版权

web开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

贴两个小例子。

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

要求：

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #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(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
     var h=document.getElementsByTagName("tr");
     for(var i=0;i<h.length;i++){
         bgcChange(h[i]);
     }
}
    function bgcChange(obj){
         obj.οnmοuseοver=function(){
             
            obj.style.backgroundColor="#f2f2f2";
         }
         obj.οnmοuseοut=function(){
            
            obj.style.backgroundColor="#fff";
         }
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      function add(){
          var x=document.getElementById("table");
          var m=document.createElement("tr");
        //可以手动给每个td输入内容，也可以直接把td作为tr的内容

<span style="white-space:pre">	</span>//   var y=document.createElement("td");
        //   y.innerHTML="xh003";
        //   var n=document.createElement("td");
        //   n.innerHTML="吴小宇";
        //   var o=document.createElement("td");
        //   o.innerHTML="<a href='javascript:;' οnclick='del(this);' >删除</a>";
        //   m.appendChild(y);
        //   m.appendChild(n);
        //   m.appendChild(o);
        m.innerHTML="<td>xh001</td><td>王小明</td><td><a href='javascript:;' οnclick='del(this);' >删除</a></td>   <!--在删除按钮上添加点击事件  -->";
          x.appendChild(m);     
      }   	 
     // 创建删除函数
     function del(obj){
        obj.parentNode.parentNode.parentNode.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:;" οnclick="del(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
  </tr>

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

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

显示结果：

当添加一行的内容变化时，

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        var num=2;
        function add(){
            num++;
            var tr=document.createElement("tr");
            var xh=document.createElement("td");
            var xm=document.createElement("td");
            xh.innerHTML="xh00"+num;
            xm.innerHTML="第"+num+"学生";
            var del=document.createElement("td");
            del.innerHTML="<a href='javascript:;' οnclick='del(this)' >删除</a>";
            var tab=document.getElementById("table");
            tab.appendChild(tr);
            tr.appendChild(xh);
            tr.appendChild(xm);
            tr.appendChild(del);
            var tr = document.getElementsByTagName("tr");
            for(var i= 0;i<tr.length;i++)
            {
                bgcChange(tr[i]);
            }
        }

2、实现如图：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     .biaoti{ 
        float:left; 
     } 
    .biaoti li { 
        float:left; 
        list-style:none;
        margin-right:40px;
    } 
    .container{
        clear:both;
    }
    .p1{
        margin-left:40px;
        display:none;
    }
    .p2{
        margin-left:40px;
        display:none;
    }
    .p3{
        margin-left:40px;
        display:none;
    }
       
       
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
        
        var bp=document.getElementsByTagName("li");
        for(var i=0;i<bp.length;i++){
            bt(bp[i],i);
            
        }
        
    }
         
    
    function bt(obj,i){
        obj.οnmοuseοver=function(){
            // obj.style.display="block";
            var p=document.getElementsByTagName("p");
            p[i].style.display="block";
            
            
        }
        obj.οnmοuseοut=function(){
            // obj.style.display="none";
            var p=document.getElementsByTagName("p");
            p[i].style.display="none";
            
        }
    }
    
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div>
    <ul class="biaoti">
        <li>房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
</div>
<div class="container">
    <p class="p1">
    275万购昌平邻铁三居 总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府 公园楼王现房
    </p>
    <p class="p2">
     40平出租屋大改造 美少女的混搭小窝<br>
     经典清新简欧爱家 90平老房焕发新生<br>
     新中式的酷色温情 66平撞色活泼家居<br>
     瓷砖就像选好老婆 卫生间烟道的设计
        
    </p>
    <p class="p3">
     通州豪华3居260万 二环稀缺2居250w甩<br>
     西3环通透2居290万 130万2居限量抢购<br>
     黄城根小学学区仅260万 121平70万抛!<br>
     独家别墅280万 苏州桥2居优惠价248万
    </p>
</div>
</body>
</html>

这个没有大的难点，有一个需要注意的地方就是不同的标题对应不同的内容，所以要把标题参数传到内容变化函数里。