小练习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 trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.style.backgroundColor = "#f2f2f2";
};
trs[i].onmouseout = function () {
this.style.backgroundColor = "#fff";
}
}
};
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
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 trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.style.backgroundColor = "#f2f2f2";
};
trs[i].onmouseout = function () {
this.style.backgroundColor = "#fff";
}
}
}
// 创建删除函数
function del(obj) {
var tr = obj.parentNode.parentNode;
tr.parentNode.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 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>
小练习2
实现选项卡切换的效果。效果如如下：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
* {
padding: 0px;
margin: 0px;
font-size: 18px;
font-weight: normal;
font-family: "Microsoft Sans Serif";
}
#tabs {
width: 330px;
padding: 5px;
height: 150px;
margin: 20px;
}
ul {
list-style-type: none;
display: block;
height: 30px;
line-height: 30px;
border-bottom: 2px saddlebrown solid;
}
ul li {
background: #fff;
float: left;
cursor: pointer;
list-style: none;
height: 28px;
line-height: 28px;
margin: 0px 3px;
border: 1px solid #aaa;
border-bottom: none;
display: inline-block;
width: 60px;
text-align: center;
}
#tabs ul li.on {
border-top: 2px solid saddlebrown;
border-bottom: 2px solid #fff;
}
#tabs div {
height: 120px;
line-height: 25px;
border: 1px #336699 solid;
border-top: none;
padding: 5px;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function () {
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs = oTab.getElementsByTagName("div");
for (var i = 0; i < oLis.length; i++) {
oLis[i].index = i;
oLis[i].onclick = function () {
for (var n = 0; n < oLis.length; n++) {
// 首先将全部的元素状态归零
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
};
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居<br>
200万内购五环三居 140万安家东三环<br>
北京首现零首付楼盘 53万购东5环50平<br>
京楼盘直降5000 中信府 公园楼王现房<br>
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝<br>
经典清新简欧爱家 90平老房焕发新生<br>
新中式的酷色温情 66平撞色活泼家居<br>
瓷砖就像选好老婆 卫生间烟道的设计<br>
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩<br>
西3环通透2居290万 130万2居限量抢购<br>
黄城根小学学区仅260万 121平70万抛!<br>
独家别墅280万 苏州桥2居优惠价248万<br>
</div>
</div>
</body>
</html>
网友评论