1.仿QQ列表分组
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
body{
font-family: "微软雅黑";
}
table {
border:#0099FF 1px solid;
100px;
border-collapse:collapse;
margin:15px 10px;
10%;
}
table td{
border:#0066FF 1px solid;
background-color:#6f5f3e;
text-align:center;
padding: 5px 0px;
}
table td div {
background-color:#FFFF99;
text-align:left;
line-height: 24px;
padding-left: 14px;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div { display:none; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
/* --通过jQuery实现访QQ列表好友分组-- */
function openDiv(thisobj){
//1.关闭其他行的div
$(thisobj).parents("tr").siblings().find("div").hide();
//2.展开或关闭点击a标签的兄弟div
$(thisobj).next().toggle();
}
/*//thisobj --> 被点击的A标签
//在显示当前div之前, 先隐藏其他div
$(thisobj).parents("tr").siblings().find("div").hide();
$(thisobj).next().toggle();*/
/* --通过js实现访QQ列表好友分组--
function openDiv(thisobj){
var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
var aDiv = document.getElementsByTagName("div");
//判断当前分组div是展开还是关闭
if(oDiv.style.display == "block"){
//如果当前div是打开的, 只需关闭该div即可
oDiv.style.display = "none";
}else{
//如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的
for(var i=0;i<aDiv.length; i++){
aDiv[i].style.display = "none";
}
oDiv.style.display = "block";
}
}
*/
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>
2.二级联动下拉框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script>
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* --通过jQuery实现二级联动下拉框 -- */
function selectCity(thisobj){
//thisobj是第一个下拉框选中的option对象
var province = $(thisobj).val();
var cities = data[province];
//添加数据前先清空一次下拉框
$("#city").html("");
//循环添加城市信息
//获取第二个下拉框，在其中添加城市信息
for(var i=0;i<cities.length;i++){
$("#city").append("<option>"+cities[i]+"</option>")
}
}
/*//获取用户选中的省份
var prov = $(thisobj).val();
//获取省份对应的市区数据
var citys = data[prov];
//先清空之前的数据
$("#city").html("<option>--选择城市--</option>");
//循环遍历取出每一个城市作为option选项填充到第二个下拉框中
for(var i=0; i<citys.length; i++){
$("#city").append("<option>"+citys[i]+"</option>");
}*/
/* --通过js实现二级联动下拉框--
function selectCity(thisobj){
//获取用户选中的省份
var prov = thisobj.value;
//再根据省份获取对应的市区
var citys = data[prov];
//获取第二个下拉列表
var oCitySele = document.getElementById("city");
//清空之前的数据
//oCitySele.innerHTML = "<option>--选择城市--</option>";
var opts = oCitySele.getElementsByTagName("option");
var len = opts.length;
for(var i=1; i< len; i++){
oCitySele.removeChild(opts[1]);
}
//循环遍历, 将每一个城市依次填充到第二个下拉列表中
for(var i=0; i<citys.length; i++){
var oOption = document.createElement("option");
oOption.innerHTML = citys[i];
//将option挂载到select上
oCitySele.appendChild(oOption);
}
}
*/
</script>
<!--
js实现注意问题:
ie10以下的浏览器不支持 select,table上的innerHTML属性
删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题
-->
</head>
<body>
<select name="country" onchange="getCountry()" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<span id="citySpan">
<select id="city">
<option>--选择城市--</option>
</select>
</span>
</div>
</body>
</html>
3.模拟员工信息管理系统
<!DOCTYPE HTML>
<html>
<head>
<title>table练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: "微软雅黑"
}
h2, h4{ text-align: center; }
div#box1, div#box2 {
text-align:center;
}
hr{
margin: 20px 0;
}
table{
margin: 0 auto;
70%;
text-align: center;
border-collapse:collapse;
}
td, th{padding: 7px; 20%;}
th{
background-color: #DCDCDC;
}
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//html文档加载完执行
$(function(){
$("#add").click(function(){
//添加员工信息
//$.trim()可以去除当前值的开始部分和结束部分的空白格
var id = $.trim($("#box1 input[name='id']").val());
var name = $.trim($("#box1 input[name='name']").val());
var email = $.trim($("#box1 input[name='email']").val());
var salary = $.trim($("#box1 input[name='salary']").val());
//非空校验
if(id == "" || name == ""|| email == "" || salary == ""){
alert("用户信息不能为空");
return;
}
var flag = false;
//id是否存在的校验
$("table tr").each(function(){
if($(this).find("td:eq(1)").text() == id){
alert("iD已存在");
flag = true;
//return;
}
});
if(flag){
return;
}
//邮箱格式校验
var reg = /w+@w+(.w+)+/;
if(!reg.test(email)){
alert("邮箱格式不正确");
return;
}
//添加数据
var $check = $("<td><input type='checkbox'/></td>")
var $id = $("<td>"+id+"</td>");
var $name = $("<td>"+name+"</td>");
var $email = $("<td>"+email+"</td>");
var $salary = $("<td>"+salary+"</td>");
var $tr = $("<tr></tr>");
$tr.append($check).append($id).append($name).append($email).append($salary);
$("table").append($tr);
});
//全选
$("#all").click(function(){
var check = $(this).attr("checked");
$("table input[type='checkbox']").attr("checked",check);
});
//删除
$("#del").click(function(){
//获取被选中的checkbox 删除其所在行
$("table input:checked:not(input[id='all'])").parents("tr").remove();
});
})
</script>
</head>
<body>
<h2>添加新员工</h2>
<div id="box1">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" id="add" value="添加"/>
</div>
<hr/>
<table border="1">
<tr>
<th>
<input type="checkbox" id="all"/>
<!--全选-->
</th>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>宋江</td>
<td>sj@163.com</td>
<td>12000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>武松</td>
<td>ws@163.com</td>
<td>10500</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>孙二娘</td>
<td>sen@163.com</td>
<td>11000</td>
</tr>
</table>
<h4><a href="#" id="del">删除选中</a></h2>
<hr/>
<div id="box2">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" id="upd" value="修改"/>
</div>
</body>
</html>
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>好友列表</title><style type="text/css">body{font-family: "微软雅黑";}table {border:#0099FF 1px solid;100px;border-collapse:collapse;margin:15px 10px;10%;}table td{border:#0066FF 1px solid;background-color:#6f5f3e;text-align:center;padding: 5px 0px;}
table td div {background-color:#FFFF99;text-align:left;line-height: 24px; padding-left: 14px;}table td a:link, table td a:visited {color:#00ffFF;text-decoration:none;}table td a:hover {color:#00CC00;}/*使用display属性:如果取值为none就是隐藏标签。*/table td div { display:none; }
</style><!--引入jquery的js库--><script src="jquery-1.4.2.js"></script><script type="text/javascript">/* --通过jQuery实现访QQ列表好友分组-- */function openDiv(thisobj){//1.关闭其他行的div$(thisobj).parents("tr").siblings().find("div").hide();//2.展开或关闭点击a标签的兄弟div$(thisobj).next().toggle();}/*//thisobj --> 被点击的A标签//在显示当前div之前, 先隐藏其他div$(thisobj).parents("tr").siblings().find("div").hide();$(thisobj).next().toggle();*//* --通过js实现访QQ列表好友分组--function openDiv(thisobj){var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];var aDiv = document.getElementsByTagName("div");
//判断当前分组div是展开还是关闭if(oDiv.style.display == "block"){//如果当前div是打开的, 只需关闭该div即可oDiv.style.display = "none";}else{//如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的 for(var i=0;i<aDiv.length; i++){aDiv[i].style.display = "none";}oDiv.style.display = "block";}} */</script></head><body><table><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a><div>秦始皇<br />刘邦<br />李世民<br />康熙<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a><div>刘备<br />关羽<br />张飞<br />赵云<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a><div>西施<br />貂蝉<br />杨贵妃<br />王昭君<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a><div>马云<br />李开复<br />俞敏洪<br />黎活明<br /></div></td></tr></table></body></html>