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添加一 ...

随机推荐

How to start the Virtualbox VMs under terminal
Since we have servral machine on my testbed(fedora), and if I need start some VMs on that, I have to ...
C#高级知识点概要(1) - 委托和事件
本文目录: 委托委托的简单使用用委托实现插件式编程多播委托静态方法和实例方法对于委托的区别泛型委托 Func 和 Action 委托委托的兼容事件事件的基本使用事件的标准模式委托 ...
TreeMap Red-Black tree
本文以Java TreeMap为例,从源代码层面,结合详细的图解,剥茧抽丝地讲解红黑树(Red-Black tree)的插入,删除以及由此产生的调整过程. 总体介绍之所以把TreeSet和TreeM ...
重写Collections实现自定义排序
Collections.sort(List<Object>, new Comparator<Object>() { public int compare(Object o1, ...
HTML&CSS基础学习笔记1.12—引入样式表
引入样式表我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...
树莓派设置固定ip
2016发布的rasbian采用的网络机制是dhcpcd: 不能使用以前的修改配置文件/etc/network/interfaces: 新的配置方式保持/etc/network/interfaces不 ...
java实现双向链表
PS:双向链表(每个节点含有指向前一个节点的前驱与后一个节点的后继) public class DoublyLinkedList { static class Node { private Objec ...
不管肉鸡，还是代理，CC识别就封杀！
这几天的心得,汇成代码. PYTHON版,我编的. #!/usr/bin/env python # -*- coding: utf-8 -*- import os,sys,time import co ...
TVS和一般的稳压二极管有什么区别
电压及电流的瞬态干扰是造成电子电路及设备损坏的主要原因,常给人们带来无法估量的损失.这些干扰通常来自于电力设备的起停操作.交流电网的不稳定.雷击干扰及静电放电等,瞬态干扰几乎无处不在.无时不有,使人感 ...
[VBA]根据身份证号码计算年龄的Excel函数
是的,昨天刚发表了一篇和Excel自定义函数有关的博客,今天又一篇,有凑数的嫌疑.但是,保存知识和传播知识本来就是写博客的初衷,所以也并不多余. 如果不知道什么是Excel自定义函数,请移步这里[1] ...

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

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

随机推荐

热门专题