jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

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>



<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>



<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>



</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>



<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><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>
相关阅读:
用JS获取地址栏参数的方法（超级简单）
返回前一页并刷新页面方法
 js 弹出确认取消对话框
 微信“无法回答问题设置”失效
 百度地图api学习平台
 JQuery 定时器 (Jquery Timer 插件)
select 框option添加属性 js计算价格保持两位小数
 修改织梦分页标签样式
 一键导航
 关于memset赋值无穷大无穷小
原文地址：https://www.cnblogs.com/akic/p/10663056.html