5.2jquery案例2
2024-04-11 00:22:47
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;width:100px;border-collapse:collapse;margin:15px 10px;width: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; }.open { display:block; }.close { display:none; } </style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">/* --通过jQuery实现访QQ列表好友分组-- */function openDiv(thisobj){//1.隐藏其他行的div//1.1把thisobj的js对象转成jquery对象//获取a标签的祖先tr，通过祖先tr找到其他行(tr) 找到每行的div并隐藏
$(thisobj).parents("tr").siblings("tr").find("div").hide();//2.当前行的div切换成显示状态//找到点击a标签下面的div 改变状态
$(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="../js/jquery-1.4.2.js"></script>
<script>var data = {"北京市": ["海淀区","朝阳区","丰台区"],"河北省": ["石家庄","唐山","秦皇岛"],"辽宁省": ["沈阳","大连","鞍山"],"山东省": ["青岛","济南","烟台"]}/* --通过jQuery实现二级联动下拉框 -- */function selectCity(thisobj){//获取省市信息var province = $("#province").val();//根据省市信息获取对应城市信息var citys = data[province];//清空
$("#city").html("<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>";//循环遍历, 将每一个城市依次填充到第二个下拉列表中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; width: 70%;text-align: center;border-collapse:collapse;}td, th{padding: 7px; width:20%;}th{background-color: #DCDCDC;}
</style><!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">//html文档加载完执行
$(function(){//为"添加"按钮绑定点击事件(点击按钮添加员工信息到table中)
$("#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;}//员工id不能重复var flag = false;$("table tr").each(function(){//判断id是否等于每行第二个td内的文本, 即idif($(this).find("td:eq(1)").text() == id){alert("ID已存在！");flag = true;return false;}});if(flag){ //如果id相等 ，中断该程序return;}//将新员工的信息插入到员工列表中var $tab = $("table"); //元素名选择器var $tr = $("<tr></tr>"); //$tr 没有什么意思只是为了做区分他是jquery对象，是一个标记var $td0 = $("<td><input type='checkbox'></td>");var $td1 = $("<td>"+id+"</td>");var $td2 = $("<td>"+name+"</td>");var $td3 = $("<td>"+email+"</td>");var $td4 = $("<td>"+salary+"</td>");//将td与tr拼接
$tr.append($td0).append($td1).append($td2).append($td3).append($td4);$tab.append($tr);});//为全选按钮绑定点击事件
$("#all").click(function(){//获取全选状态var check = $(this).attr("checked");//将所有复选框状态与全选保持一致
$("table input[type='checkbox']").attr("checked",check);});//为"删除"绑定点击事件(点击"删除",删除所选员工信息)
$("#del").click(function(){$("input:checked:not(input[id='all'])").parents("tr").remove();});//为"修改"绑定点击事件(点击"修改",修改指定ID的员工信息)
$("#upd").click(function(){//获取修改的员工信息var id = $.trim($("#box2 input[name='id']").val()); var name = $.trim($("#box2 input[name='name']").val());var email = $.trim($("#box2 input[name='email']").val()); var salary = $.trim($("#box2 input[name='salary']").val());//修改员工信息不能为空 if(id == "" || name == "" || email == "" || salary == ""){alert("修改的信息不能为空!");return;}//根据ID修改对应的信息var flag = false;$("table tr").each(function(){//判断id是否等于每行第二个td内的文本, 即idif($(this).find("td:eq(1)").text() == id){//进行修改
$(this).find("td:eq(2)").text(name);$(this).find("td:eq(3)").text(email);$(this).find("td:eq(4)").text(salary);flag = true;return true;}})if(!flag){alert("修改的员工ID不存在！");}});})</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>转载于:https://www.cnblogs.com/xuwangqi/p/11294424.html
5.2jquery案例2相关推荐
- python 网络编程之Socket通信案例消息发送与接收
背景 网络编程是python编程中的一项基本技术.本文将实现一个简单的Socket通信案例消息发送与接收 正文 在python中的socket编程的大致流程图如上所示 我们来首先编写客户端的代码: # ...
- 2021年大数据ELK（十七）：Elasticsearch SQL 订单统计分析案例
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 订单统计分析案例 一.案例介绍 二.创建索引 三.导入测试数据 四.统计不同支 ...
- 2021年大数据ELK（十六）：Elasticsearch SQL（职位查询案例）
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 职位查询案例 一.查询职位索引库中的一条数据 二.将SQL转换为DSL 三.职 ...
- 2021年大数据ELK（四）：Lucene的美文搜索案例
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 美文搜索案例 一.需求 二.准备工作 1.创建IDEA项目 2. ...
- ❤️让人心跳加速的陌陌案例，大数据必需学会的基础案例！❤️ 【推荐收藏】
全网最详细的大数据HBase文章系列,强烈建议收藏加关注! 已列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 前言 陌陌案例 一.陌陌案例的需求说明 二.陌陌案例中表设计内容 1. ...
- 2021年大数据Hive（十二）：Hive综合案例！！！
全网最详细的大数据Hive文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 前言 Hive综合案例 一.需求描述 二.项目表的字段 三.进 ...
- 2021年大数据Flink（三十八）：Table与SQL 案例五 FlinkSQL整合Hive
目录 案例五 FlinkSQL整合Hive 介绍 集成Hive的基本方式 准备工作 1.添加hadoop_classpath 2.下载jar并上传至flink/lib目录 3.修改hive配置 4.启 ...
- 2021年大数据Flink（三十七）：Table与SQL 案例四
目录 案例四 需求 代码实现 案例四 需求 从Kafka中消费数据并过滤出状态为success的数据再写入到Kafka {"user_id": "1", &qu ...
- 2021年大数据Flink（三十六）：Table与SQL 案例三
目录 案例三 需求 编码步骤 代码实现-方式1 代码实现-方式2 案例三 需求 使用Flink SQL来统计5秒内 每个用户的 订单总数.订单的最大金额.订单的最小金额 也就是每隔5秒统计最近5秒的每 ...
最新文章
- python使用正则表达式抽取文件中的IP地址
- live555工程建立与调试
- 用C#实现计算机图形学算法
- java1.8 lambda进行并行运算
- 【android】SurfaceFlinger合成
- HTMLParser-实战
- linux 查看日志_干货 | 名企高频考点之谈谈Linux日志查看方式都有哪些
- objective-c block 旧版详解
- 吴陆 java,成年人的世界，崩溃无声。
- 关于计算机实验的英语作文,关于实验的英语作文
- BZOJ3309 DZY Loves Math（莫比乌斯反演+线性筛）
- mysql事务保证幂等_事务与一致性：刚性or柔性
- python to datetime_Python中缺少datetime.timedelta.to_seconds（）-float？
- Delphi XE DataSnap三层开发实务
- 达梦数据库的简单使用
- vue项目导入excel数据
- 简历中尽量不要出现精通_在个人简历中，熟悉、了解、熟练、精通之间有什么区别？...
- C++标准库string类型那些事儿
- NS3中“E: package ‘gnuplot‘ has no installation candidate”问题解决方案
- 【KCP】UDP可靠性传输
热门文章
- java获取mavenlib路径,maven install报错致命错误: 在类路径或引导类路径中找不到程序包 java.lang | ZPY博客...
- modbus rtu java 通讯_android Modbus Rtu 通讯例子
- java json特殊字符处理_java json字符串传递给 js 时 特殊字符转义错误 研究
- 数据分析——朴素贝叶斯原理示意图
- 为什么要学jquery
- 分布式服务器客户端实验
- 查看当前系统的glibc版本
- 数据可视化（三）- Seaborn简易入门
- acrgis api for javaScript中的FeatureLayer查询
- 注解 @EnableFeignClients 工作原理