Javascript进阶篇——总结--DOM案例+选项卡效果

断断续续的把慕课的JavaScript基础和进阶看完了，期间不怎么应用有的都忘记了，接下来多开始写些效果，进行实际应用。

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

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

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(){

         Highlight();

      }

     function Highlight(){

         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         var tbody = document.getElementById('table').lastChild;

         var trs = tbody.getElementsByTagName("tr");

         for(var i = 1; i < trs.length; i++){

             trs[i].onmouseover = function(){

                 this.style.background = "#f2f2f2";

             }

             trs[i].onmouseout = function(){

                 this.style.background = "#fff";

             };

         };

     };

     // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     function addOne(){

         var tbody = document.getElementById("table").lastChild;

         var tr = document.createElement("tr");

         var td = document.createElement("td");

         td.innerHTML = ("<input type='text'/>");

         tr.appendChild(td);

         var td = document.createElement("td");

         td.innerHTML = ("<input type='text'/>");

         tr.appendChild(td);

         var td = document.createElement("td");

         td.innerHTML = ("<a onclick='delet(this)' href='javascript:;' >删除</a>");

         tr.appendChild(td);

         tbody.appendChild(tr);

          Highlight();

     }

     // 创建删除函数

     function delet(ss){

         var tbody = document.getElementById("table").lastChild;

         var tr = ss.parentNode.parentNode;

         tbody.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 onclick="delet(this)" href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

         </tr>

         <tr>

             <td>xh002</td>

             <td>刘小芳</td>

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

         </tr>

     </table>

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

 </body>

 </html>

选项卡效果：

 <!DOCTYPE html>

 <html>

 <head lang="en">

 <meta charset="UTF-8">

 <title>实践题 - 选项卡</title>

 <style type="text/css">

 /* CSS样式制作 */

     *{  padding: 0; margin: 0; }

     ul li{ list-style: none; }

     #tabs{ width: 276px; margin-left: 50px;}

     #tabs .tabs_title{ border-bottom: 2px solid #8B4513; height: 32px;}

     #tabs .tabs_title li{ float: left; display: inline-block; background: #fff; width: 80px; line-height: 30px; text-align: center; border: 1px solid #eeefef; border-bottom: none; margin-right: 10px; cursor: pointer;}

     #tabs .tabs_title .on{ border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF; }

     #tabs div{ border: 1px solid #7396b8; border-top: none; line-height: 38px; }

     #tabs .tabs_hide{ display: none; }

 </style>

 <script type="text/javascript">

 // JS实现选项卡切换

 window.onload = function(){

     var tabs = document.getElementById("tabs");

     var tabs_ul = tabs.getElementsByTagName("ul")[0];

     var tabs_li = tabs_ul.getElementsByTagName("li");

     var tabs_main = tabs.getElementsByTagName("div");

     for (var i = 0 , len = tabs_li.length; i < len; i++) {

         tabs_li[i].index = i;

         tabs_li[i].onclick = function(){

             for(var n = 0; n < len; n++){

                 tabs_li[n].className = "";

                 tabs_main[n].className = "tabs_hide";

             }

              this.className = "on";

              tabs_main[this.index].className = "";

         }

     }

 }

 </script>

 </head>

 <body>

 <!-- HTML页面布局 -->

 <div id="tabs">

     <ul class="tabs_title">

         <li class="on">房产</li>

         <li>家居</li>

         <li>二手房</li>

     </ul>

     <div>

         <p>275万购昌平邻铁三居 总价20万买一居</p>

         <p>200万内购五环三居 140万安家东三环</p>

         <p>北京首现零首付楼盘 53万购东5环50平</p>

         <p>京楼盘直降5000 中信府 公园楼王现房</p>

     </div>

     <div class="tabs_hide">

         <p>40平出租屋大改造 美少女的混搭小窝</p>

         <p>经典清新简欧爱家 90平老房焕发新生</p>

         <p>新中式的酷色温情 66平撞色活泼家居</p>

         <p>瓷砖就像选好老婆 卫生间烟道的设计</p>

     </div>

     <div class="tabs_hide">

         <p>通州豪华3居260万 二环稀缺2居250w甩</p>

         <p>西3环通透2居290万 130万2居限量抢购</p>

         <p>黄城根小学学区仅260万 121平70万抛!</p>

         <p>独家别墅280万 苏州桥2居优惠价248万</p>

     </div>

 </div>

 </body>

 </html>

Javascript进阶篇——总结--DOM案例+选项卡效果的更多相关文章

＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战一.学习任务通过几个案例练习回顾学过的知识通过练习积累JS的使用技巧二.实例练习1:删除确认提示框实例描述: 防止用户小心单击了“删除”按钮,在用 ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
慕课网javascript 进阶篇第九章编程练习
把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...
JavaScript进阶篇 - -第1章系好安全带
第1章系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...
二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三环北京首现零首付楼 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

随机推荐

css行高line-height的用法（转）
本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...
C复习手记(Day3)
C预处理器 C 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理.我们将把 C 预处理器 ...
html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
类库dll引用不成功问题
警告:未能解析引用的程序集“*******, Version=1.0.0.0, Culture=neutral,”,因为它对不在当前目标框架“.NETFramework,Version=v4.0,Pr ...
C#--virtual,abstract,override,new,sealed
virtual:使用此关键字,可以使其在派生类中被重写. abstract:抽象方法,由子类重写,或继续为抽象方法存在,并由其子子类实现. override: 重写父类方法,属性,或事件的抽象实现或虚 ...
uva 846 - Steps
找出步數與距離的關係即可得解. 0步最多能抵達的距離是0 1步最多能抵達的距離是1(1) 2步最多能抵達的距離是2(1 1) 3步最多能抵達的距離是4(1 2 1) 4步最多能抵達的距離是6(1 2 ...
XML预定义的实体
在TSQL读取XML中一些特定的字符时出错,在XML中有些自付要用实体: 下面是五个在XML文档中预定义好的实体: < < 小于号 > > 大于号 & & 和 ...
php echo字符串的连接格式
echo "<td align=\"center\"><img src=\""; 1. \" \" 2. ...
SPI协议总结
四种工作模式: Mode 0 CPOL=0, CPHA=0 Mode 1 CPOL=0, CPHA=1Mode 2 CPOL=1, CPHA=0 Mode 3 CPOL=1, CPHA=1 常使用Mo ...
cf C. Vasya and Robot
http://codeforces.com/contest/355/problem/C 枚举L和R相交的位置. #include <cstdio> #include <cstring ...

Javascript进阶篇——总结--DOM案例+选项卡效果

Javascript进阶篇——总结--DOM案例+选项卡效果的更多相关文章

随机推荐

热门专题