您的位置：首页 > Web前端 > JavaScript

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

2016-03-18 17:25 585 查看

断断续续的把慕课的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
.className = "";
tabs_main
.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航