DOM对象编程练习小结

来源：互联网发布：淘宝木偶困境编辑：程序博客网时间：2024/06/10 00:52

贴两个小例子。

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.onmouseover=function(){                         obj.style.backgroundColor="#f2f2f2";         }         obj.onmouseout=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:;' onclick='del(this);' >删除</a>";        //   m.appendChild(y);        //   m.appendChild(n);        //   m.appendChild(o);        m.innerHTML="<td>xh001</td><td>王小明</td><td><a href='javascript:;' onclick='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:;" onclick="del(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->  </tr>  <tr><td>xh002</td><td>刘小芳</td><td><a href="javascript:;" onclick="del(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->  </tr>    </table>  <input type="button" value="添加一行"  onclick="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:;' onclick='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.onload=function(){                var bp=document.getElementsByTagName("li");        for(var i=0;i<bp.length;i++){            bt(bp[i],i);                    }            }                 function bt(obj,i){        obj.onmouseover=function(){            // obj.style.display="block";            var p=document.getElementsByTagName("p");            p[i].style.display="block";                                }        obj.onmouseout=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>

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

0 0